💄 style: Fix some style problem

locales/en_US.json

@@ -1,4 +1,5 @@
 {
+  "appInitializing": "StableDiffusion / LobeTheme is initializing, please wait...",
   "community": "Community",
   "custom": "Custom",
   "extraNetwork": "Extra Network",

locales/ja_JP.json

@@ -1,4 +1,5 @@
 {
+  "appInitializing": "StableDiffusion / LobeThemeが初期化中です。お待ちください...",
   "community": "コミュニティ",
   "custom": "カスタム",
   "extraNetwork": "追加ネットワーク",

locales/ko_KR.json

@@ -1,4 +1,5 @@
 {
+  "appInitializing": "StableDiffusion / LobeTheme가 초기화 중입니다. 잠시 기다려주세요...",
   "community": "커뮤니티",
   "custom": "사용자 정의",
   "extraNetwork": "추가 네트워크",

locales/ru_RU.json

@@ -1,4 +1,5 @@
 {
+  "appInitializing": "StableDiffusion / LobeTheme инициализируется, пожалуйста, подождите...",
   "community": "Сообщество",
   "custom": "Кастомный",
   "extraNetwork": "Доп. Сети",

locales/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "appInitializing": "StableDiffusion / LobeTheme 启动中，请耐心等待...",
   "community": "社区",
   "custom": "自定义",
   "extraNetwork": "附加网络",

locales/zh_HK.json

@@ -1,4 +1,5 @@
 {
+  "appInitializing": "StableDiffusion / LobeTheme 正在初始化，请稍候...",
   "community": "社區",
   "custom": "自訂",
   "extraNetwork": "附加網絡",

src/components/Loading/index.tsx

@@ -1,28 +1,22 @@
-import { Icon } from '@lobehub/ui';
-import isEqual from 'fast-deep-equal';
+import { Icon, Logo } from '@lobehub/ui';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
-
-import { Logo } from '@/components';
-import { selectors, useAppStore } from '@/store';
-
-import { useStyles } from './style';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
 
 const Loading = memo(() => {
-  const setting = useAppStore(selectors.currentSetting, isEqual);
-  const { styles } = useStyles({
-    isPrimaryColor: Boolean(setting.primaryColor),
-    liteAnimation: setting.liteAnimation,
-  });
+  const { t } = useTranslation();
 
   return (
-    <section className={styles.container}>
-      {!setting.liteAnimation && <div className={styles.canvas} />}
-      <div className={styles.inner}>
-        <Logo size={48} />
-        <Icon className={styles.icon} icon={Loader2} size={{ fontSize: 32 }} spin />
-      </div>
-    </section>
+    <Flexbox height={'100vh'} width={'100%'}>
+      <Center flex={1} gap={12} width={'100%'}>
+        <Logo extra={'SD'} size={48} type={'combine'} />
+        <Center gap={16} horizontal>
+          <Icon icon={Loader2} spin />
+          {t('appInitializing')}
+        </Center>
+      </Center>
+    </Flexbox>
   );
 });
 

src/pages/ExtraNetworkSidebar/Inner.tsx

@@ -61,7 +61,7 @@ const Inner = memo(() => {
         img2imgRender.id = 'img2img_render';
         img2imgTab?.append(img2imgRender);
       }
-      if (document.querySelector('#txt2img_lora_cards')) {
+      if (document.querySelector('.extra-network-cards')) {
         civitaiHelperFix();
         setExtraLoading(false);
         return;

src/styles/components/progress.ts

@@ -10,6 +10,10 @@ const progressAnimation = keyframes`
     `;
 
 export default (token: Theme) => css`
+  .progress-container {
+    flex-direction: column;
+  }
+
   .eta-bar {
     overflow: hidden;