💄 style: improve page loading state (lobehub#5048)

* 🐛 fix: fix welcome 404

* 💄 style: improve loading page state

locales/ar/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "جارٍ تحميل صفحة الدردشة...",
-    "initializing": "جارٍ تشغيل التطبيق..."
+    "goToChat": "(4/4) جارٍ تحميل صفحة الدردشة...",
+    "initAuth": "(2/4) جاري تهيئة خدمة المصادقة...",
+    "initUser": "(3/4) جاري تهيئة حالة المستخدم...",
+    "initializing": "(1/4) جارٍ تشغيل التطبيق..."
   },
   "autoGenerate": "توليد تلقائي",
   "autoGenerateTooltip": "إكمال تلقائي بناءً على الكلمات المقترحة لوصف المساعد",

locales/bg-BG/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Зареждане на страницата за чат...",
-    "initializing": "Стартиране на приложението..."
+    "goToChat": "(4/4) Зареждане на страницата за разговори...",
+    "initAuth": "(2/4) Инициализиране на услугата за удостоверяване...",
+    "initUser": "(3/4) Инициализиране на състоянието на потребителя...",
+    "initializing": "(1/4) Стартиране на приложението..."
   },
   "autoGenerate": "Автоматично генериране",
   "autoGenerateTooltip": "Автоматично генериране на описание на агент въз основа на подкани",

locales/de-DE/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Lade die Chat-Seite...",
-    "initializing": "Anwendung wird gestartet..."
+    "goToChat": "(4/4) Lade die Chat-Seite...",
+    "initAuth": "(2/4) Authentifizierungsdienst wird initialisiert...",
+    "initUser": "(3/4) Benutzerstatus wird initialisiert...",
+    "initializing": "(1/4) Anwendung wird gestartet..."
   },
   "autoGenerate": "Automatisch generieren",
   "autoGenerateTooltip": "Assistentenbeschreibung automatisch auf Basis von Vorschlägen vervollständigen",

locales/en-US/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Loading chat page...",
-    "initializing": "Starting application..."
+    "goToChat": "(4/4) Loading chat page...",
+    "initAuth": "(2/4) Initializing authentication service...",
+    "initUser": "(3/4) Initializing user status...",
+    "initializing": "(1/4) Starting up application..."
   },
   "autoGenerate": "Auto Generate",
   "autoGenerateTooltip": "Auto-generate assistant description based on prompts",

locales/es-ES/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Cargando página de chat...",
-    "initializing": "Iniciando la aplicación..."
+    "goToChat": "(4/4) Cargando la página de chat...",
+    "initAuth": "(2/4) Inicializando el servicio de autenticación...",
+    "initUser": "(3/4) Inicializando el estado del usuario...",
+    "initializing": "(1/4) Iniciando la aplicación..."
   },
   "autoGenerate": "Generación automática",
   "autoGenerateTooltip": "Completar automáticamente la descripción del asistente basándose en las sugerencias",

locales/fa-IR/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "در حال بارگذاری صفحه گفتگو...",
-    "initializing": "در حال راه‌اندازی برنامه..."
+    "goToChat": "(4/4) در حال بارگذاری صفحه گفتگو...",
+    "initAuth": "(2/4) در حال راه‌اندازی سرویس احراز هویت...",
+    "initUser": "(3/4) در حال راه‌اندازی وضعیت کاربر...",
+    "initializing": "(1/4) در حال راه‌اندازی برنامه..."
   },
   "autoGenerate": "تکمیل خودکار",
   "autoGenerateTooltip": "تکمیل خودکار توضیحات دستیار بر اساس کلمات راهنما",

locales/fr-FR/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Chargement de la page de discussion...",
-    "initializing": "L'application se lance..."
+    "goToChat": "(4/4) Chargement de la page de conversation...",
+    "initAuth": "(2/4) Initialisation du service d'authentification...",
+    "initUser": "(3/4) Initialisation de l'état de l'utilisateur...",
+    "initializing": "(1/4) L'application se lance..."
   },
   "autoGenerate": "Générer automatiquement",
   "autoGenerateTooltip": "Générer automatiquement la description de l'agent basée sur les suggestions",

locales/it-IT/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Caricamento della pagina di chat...",
-    "initializing": "Avvio dell'applicazione..."
+    "goToChat": "(4/4) Caricamento della pagina della chat in corso...",
+    "initAuth": "(2/4) Inizializzazione del servizio di autenticazione...",
+    "initUser": "(3/4) Inizializzazione dello stato utente...",
+    "initializing": "(1/4) Avvio dell'app in corso..."
   },
   "autoGenerate": "Generazione automatica",
   "autoGenerateTooltip": "Completamento automatico basato su suggerimenti",

locales/ja-JP/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "チャットページを読み込んでいます...",
-    "initializing": "アプリを起動しています..."
+    "goToChat": "(4/4) チャットページを読み込んでいます...",
+    "initAuth": "(2/4) 認証サービスの初期化...",
+    "initUser": "(3/4) ユーザー状態の初期化...",
+    "initializing": "(1/4) アプリを起動しています..."
   },
   "autoGenerate": "自動生成",
   "autoGenerateTooltip": "ヒントに基づいてエージェントの説明を自動生成します",

locales/ko-KR/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "대화 페이지 로딩 중...",
-    "initializing": "앱 시작 중..."
+    "goToChat": "(4/4) 대화 페이지 로딩 중...",
+    "initAuth": "(2/4) 인증 서비스 초기화 중...",
+    "initUser": "(3/4) 사용자 상태 초기화 중...",
+    "initializing": "(1/4) 애플리케이션 시작 중..."
   },
   "autoGenerate": "자동 생성",
   "autoGenerateTooltip": "힌트 단어를 기반으로 에이전트 설명을 자동으로 완성합니다",

locales/nl-NL/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "De chatpagina wordt geladen...",
-    "initializing": "De applicatie wordt gestart..."
+    "goToChat": "(4/4) De chatpagina wordt geladen...",
+    "initAuth": "(2/4) Initialisatie van de autorisatiedienst...",
+    "initUser": "(3/4) Initialisatie van de gebruikersstatus...",
+    "initializing": "(1/4) De applicatie wordt opgestart..."
   },
   "autoGenerate": "Automatisch genereren",
   "autoGenerateTooltip": "Automatisch assistentbeschrijving genereren op basis van suggesties",

locales/pl-PL/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Ładowanie strony czatu...",
-    "initializing": "Uruchamianie aplikacji..."
+    "goToChat": "(4/4) Ładowanie strony czatu...",
+    "initAuth": "(2/4) Inicjalizacja usługi autoryzacji...",
+    "initUser": "(3/4) Inicjalizacja stanu użytkownika...",
+    "initializing": "(1/4) Uruchamianie aplikacji..."
   },
   "autoGenerate": "Automatyczne generowanie",
   "autoGenerateTooltip": "Automatyczne uzupełnianie opisu asystenta na podstawie sugestii",

locales/pt-BR/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Carregando página de chat...",
-    "initializing": "Iniciando aplicativo..."
+    "goToChat": "(4/4) Carregando página de conversa...",
+    "initAuth": "(2/4) Inicializando o serviço de autenticação...",
+    "initUser": "(3/4) Inicializando o estado do usuário...",
+    "initializing": "(1/4) Iniciando aplicativo..."
   },
   "autoGenerate": "Auto completar",
   "autoGenerateTooltip": "Auto completar descrição do assistente com base em sugestões",

locales/ru-RU/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Загрузка страницы чата...",
-    "initializing": "Запуск приложения..."
+    "goToChat": "(4/4) Загрузка страницы чата...",
+    "initAuth": "(2/4) Инициализация службы аутентификации...",
+    "initUser": "(3/4) Инициализация состояния пользователя...",
+    "initializing": "(1/4) Запуск приложения..."
   },
   "autoGenerate": "Автозаполнение",
   "autoGenerateTooltip": "Автоматическое дополнение описания агента на основе подсказок",

locales/tr-TR/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Sohbet sayfası yükleniyor...",
-    "initializing": "Uygulama başlatılıyor..."
+    "goToChat": "(4/4) Sohbet sayfası yükleniyor...",
+    "initAuth": "(2/4) Kimlik doğrulama hizmeti başlatılıyor...",
+    "initUser": "(3/4) Kullanıcı durumu başlatılıyor...",
+    "initializing": "(1/4) Uygulama başlatılıyor..."
   },
   "autoGenerate": "Otomatik Oluştur",
   "autoGenerateTooltip": "Auto-generate agent description based on prompts",

locales/vi-VN/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "Đang tải trang trò chuyện...",
-    "initializing": "Đang khởi động ứng dụng..."
+    "goToChat": "(4/4) Đang tải trang trò chuyện...",
+    "initAuth": "(2/4) Đang khởi tạo dịch vụ xác thực...",
+    "initUser": "(3/4) Đang khởi tạo trạng thái người dùng...",
+    "initializing": "(1/4) Đang khởi động ứng dụng..."
   },
   "autoGenerate": "Tự động tạo",
   "autoGenerateTooltip": "Tự động hoàn thành mô tả trợ lý dựa trên từ gợi ý",

locales/zh-CN/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "对话页面加载中...",
-    "initializing": "应用启动中..."
+    "goToChat": "(4/4) 对话页面加载中...",
+    "initAuth": "(2/4) 鉴权服务初始化...",
+    "initUser": "(3/4) 用户状态初始化...",
+    "initializing": "(1/4) 应用启动中..."
   },
   "autoGenerate": "自动补全",
   "autoGenerateTooltip": "基于提示词自动补全助手描述",

locales/zh-TW/common.json

@@ -10,8 +10,10 @@
     }
   },
   "appLoading": {
-    "goToChat": "對話頁面加載中...",
-    "initializing": "應用啟動中..."
+    "goToChat": "(4/4) 對話頁面加載中...",
+    "initAuth": "(2/4) 鑑權服務初始化...",
+    "initUser": "(3/4) 使用者狀態初始化...",
+    "initializing": "(1/4) 應用啟動中..."
   },
   "autoGenerate": "自動生成",
   "autoGenerateTooltip": "基於提示詞自動生成助手描述",

next.config.mjs

@@ -159,6 +159,11 @@ const nextConfig = {
       permanent: true,
       source: '/settings',
     },
+    {
+      destination: '/chat',
+      permanent: true,
+      source: '/welcome',
+    },
   ],
 
   rewrites: async () => [

src/app/loading/Content.tsx

@@ -3,12 +3,15 @@ import { useTranslation } from 'react-i18next';
 
 import FullscreenLoading from '@/components/FullscreenLoading';
 
-const Content = memo<{ goToChat: boolean }>(({ goToChat }) => {
+import { AppLoadingStage } from './type';
+
+interface ContentProps {
+  loadingStage: AppLoadingStage;
+}
+const Content = memo<ContentProps>(({ loadingStage }) => {
   const { t } = useTranslation('common');
 
-  return (
-    <FullscreenLoading title={goToChat ? t('appLoading.goToChat') : t('appLoading.initializing')} />
-  );
+  return <FullscreenLoading title={t(`appLoading.${loadingStage}`)} />;
 });
 
 export default Content;

src/app/loading/Redirect.tsx

@@ -8,11 +8,13 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
+import { AppLoadingStage } from './type';
+
 interface RedirectProps {
-  setGoToChat: (value: boolean) => void;
+  setLoadingStage: (value: AppLoadingStage) => void;
 }
 
-const Redirect = memo<RedirectProps>(({ setGoToChat }) => {
+const Redirect = memo<RedirectProps>(({ setLoadingStage }) => {
   const router = useRouter();
   const [isLogin, isLoaded, isUserStateInit, isOnboard] = useUserStore((s) => [
     authSelectors.isLogin(s),
@@ -23,7 +25,7 @@ const Redirect = memo<RedirectProps>(({ setGoToChat }) => {
   const isPgliteNotEnabled = useGlobalStore(systemStatusSelectors.isPgliteNotEnabled);
 
   const navToChat = () => {
-    setGoToChat(true);
+    setLoadingStage(AppLoadingStage.GoToChat);
     router.replace('/chat');
   };
 
@@ -35,7 +37,10 @@ const Redirect = memo<RedirectProps>(({ setGoToChat }) => {
     }
 
     // if user auth state is not ready, wait for loading
-    if (!isLoaded) return;
+    if (!isLoaded) {
+      setLoadingStage(AppLoadingStage.InitAuth);
+      return;
+    }
 
     // this mean user is definitely not login
     if (!isLogin) {
@@ -44,7 +49,10 @@ const Redirect = memo<RedirectProps>(({ setGoToChat }) => {
     }
 
     // if user state not init, wait for loading
-    if (!isUserStateInit) return;
+    if (!isUserStateInit) {
+      setLoadingStage(AppLoadingStage.InitUser);
+      return;
+    }
 
     // user need to onboard
     if (!isOnboard) {

src/app/loading/index.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from 'react';
 
+import { AppLoadingStage } from '@/app/loading/type';
+
 import Client from './Content';
 import Redirect from './Redirect';
 
 const ScreenLoading = () => {
-  const [goToChat, setGoToChat] = useState(false);
+  const [loadingStage, setLoadingStage] = useState(AppLoadingStage.Initializing);
   return (
     <>
-      <Client goToChat={goToChat} />
-      <Redirect setGoToChat={setGoToChat} />
+      <Client loadingStage={loadingStage} />
+      <Redirect setLoadingStage={setLoadingStage} />
     </>
   );
 };

src/app/loading/type.ts

@@ -0,0 +1,6 @@
+export enum AppLoadingStage {
+  GoToChat = 'goToChat',
+  InitAuth = 'initAuth',
+  InitUser = 'initUser',
+  Initializing = 'initializing',
+}

src/components/FullscreenLoading/index.tsx

@@ -1,11 +1,11 @@
 import { Icon } from '@lobehub/ui';
 import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
 
-const FullscreenLoading = memo<{ title?: string }>(({ title }) => {
+const FullscreenLoading = memo<{ title?: ReactNode }>(({ title }) => {
   return (
     <Flexbox height={'100%'} style={{ position: 'relative', userSelect: 'none' }} width={'100%'}>
       <Center flex={1} gap={16} width={'100%'}>

src/layout/GlobalProvider/index.tsx

@@ -25,6 +25,9 @@ import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
 const parserFallbackLang = async () => {
+  // if the default language is not 'en-US', just return the default language as fallback lang
+  if (DEFAULT_LANG !== 'en-US') return DEFAULT_LANG;
+
   const header = await headers();
   /**
    * The arguments are as follows:

src/locales/default/common.ts

@@ -11,8 +11,10 @@ export default {
     },
   },
   appLoading: {
-    goToChat: '对话页面加载中...',
-    initializing: '应用启动中...',
+    goToChat: '(4/4) 对话页面加载中...',
+    initAuth: '(2/4) 鉴权服务初始化...',
+    initUser: '(3/4) 用户状态初始化...',
+    initializing: '(1/4) 应用启动中...',
   },
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',