refactor(guard): Initialize the app by route entry

ui/src/App.tsx

@@ -1,7 +1,7 @@
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import './i18n/init';
-import { routes, createBrowserRouter } from '@/router';
+import routes from '@/router';
 
 function App() {
   const router = createBrowserRouter(routes);

ui/src/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import ReactDOM from 'react-dom/client';
 
-import { guard } from '@/utils';
-
 import App from './App';
 
 import './index.scss';
@@ -12,13 +10,8 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
-async function bootstrapApp() {
-  await guard.setupApp();
-  root.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>,
-  );
-}
-
-bootstrapApp();
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

ui/src/router/index.tsx

@@ -1,5 +1,5 @@
 import { Suspense, lazy } from 'react';
-import { RouteObject, createBrowserRouter } from 'react-router-dom';
+import { RouteObject } from 'react-router-dom';
 
 import Layout from '@/pages/Layout';
 import ErrorBoundary from '@/pages/50X';
@@ -49,4 +49,4 @@ const routeWrapper = (routeNodes: RouteNode[], root: RouteObject[]) => {
 
 routeWrapper(baseRoutes, routes);
 
-export { routes, createBrowserRouter };
+export default routes;

ui/src/router/routes.ts

@@ -20,6 +20,7 @@ const routes: RouteNode[] = [
   {
     path: '/',
     page: 'pages/Layout',
+    loader: guard.setupApp,
     guard: () => {
       const gr = guard.shouldLoginRequired();
       if (!gr.ok) {

ui/src/utils/guard.ts

@@ -11,10 +11,10 @@ import {
   loginToContinueStore,
 } from '@/stores';
 import { RouteAlias } from '@/router/alias';
-import Storage from '@/utils/storage';
 import { LOGGED_USER_STORAGE_KEY } from '@/common/constants';
-import { setupAppLanguage, setupAppTimeZone } from '@/utils/localize';
 
+import Storage from './storage';
+import { setupAppLanguage, setupAppTimeZone } from './localize';
 import { floppyNavigation } from './floppyNavigation';
 
 type TLoginState = {
@@ -253,6 +253,10 @@ export const tryLoggedAndActivated = () => {
   return gr;
 };
 
+/**
+ * Initialize app configuration
+ */
+let appInitialized = false;
 export const initAppSettingsStore = async () => {
   const appSettings = await getAppSettings();
   if (appSettings) {
@@ -266,24 +270,18 @@ export const initAppSettingsStore = async () => {
   }
 };
 
-export const shouldInitAppFetchData = () => {
-  if (isIgnoredPath('/install')) {
-    return false;
-  }
-
-  return true;
-};
-
 export const setupApp = async () => {
+  if (appInitialized) {
+    return;
+  }
   /**
    * WARN:
    * 1. must pre init logged user info for router guard
    * 2. must pre init app settings for app render
    */
   // TODO: optimize `initAppSettingsStore` by server render
-  if (shouldInitAppFetchData()) {
-    await Promise.allSettled([pullLoggedUser(), initAppSettingsStore()]);
-    setupAppLanguage();
-    setupAppTimeZone();
-  }
+  await Promise.allSettled([pullLoggedUser(), initAppSettingsStore()]);
+  setupAppLanguage();
+  setupAppTimeZone();
+  appInitialized = true;
 };

ui/src/utils/index.ts

@@ -2,7 +2,7 @@ export { default as request } from './request';
 export { default as Storage } from './storage';
 export { floppyNavigation } from './floppyNavigation';
 
-export * as guard from './guard';
-export * as localize from './localize';
 export * from './common';
 export * from './color';
+export * as localize from './localize';
+export * as guard from './guard';

ui/src/utils/localize.ts

@@ -9,13 +9,14 @@ import {
   DEFAULT_LANG,
   LANG_RESOURCE_STORAGE_KEY,
 } from '@/common/constants';
-import { Storage } from '@/utils';
 import {
   getAdminLanguageOptions,
   getLanguageConfig,
   getLanguageOptions,
 } from '@/services';
 
+import Storage from './storage';
+
 export const loadLanguageOptions = async (forAdmin = false) => {
   const languageOptions = forAdmin
     ? await getAdminLanguageOptions()