diff --git a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
index 4e54016b..08f2522a 100644
--- a/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
+++ b/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { Translate } from '../translate';
 import { OfficialGachaIndex, OfficialGachaType, util } from 'genshin-gacha-kit';
 import { useAsync } from '@capital/common';
-import { PillTabs, PillTabPane } from '@capital/component';
+import { PillTabs, PillTabPane, LoadingSpinner } from '@capital/component';
 import { GachaPool } from './GachaPool';
 import _groupBy from 'lodash/groupBy';
 import './index.less';
 
 const GenshinPanel: React.FC = React.memo(() => {
-  const { value: gachaList } = useAsync(async () => {
+  const { value: gachaList, loading } = useAsync(async () => {
     const gacha = await util.getGachaIndex();
     const dict = _groupBy(gacha, 'gacha_type') as unknown as Record<
       keyof OfficialGachaType,
@@ -30,6 +30,8 @@ const GenshinPanel: React.FC = React.memo(() => {
         {Translate.genshin} - {Translate.gacha}
       </div>
 
+      {loading && <LoadingSpinner />}
+
       <PillTabs>
         {(gachaList ?? []).map((item) => (
           <PillTabPane