feat:optimize app store loading (#4607)

Signed-off-by: jingyang <3161362058@qq.com>
labring · Mar 19, 2024 · b6b8108 · b6b8108
1 parent dc60d19
commit b6b8108
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 20 deletions.
diff --git a/frontend/providers/template/src/components/layout/index.tsx b/frontend/providers/template/src/components/layout/index.tsx
@@ -1,13 +1,19 @@
 import { Box, Grid } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import AppMenu from './appmenu';
+
+import dynamic from 'next/dynamic';
 
 const ShowLayoutRoute: Record<string, boolean> = {
   '/': true,
   '/app': true,
   '/deploy': true
 };
 
+const AppMenu = dynamic(() => import('./appmenu'), {
+  ssr: false,
+  loading: () => <div></div>
+});
+
 export default function Layout({ children }: { children: JSX.Element }) {
   const router = useRouter();
 

diff --git a/frontend/providers/template/src/components/layout/sidebar.tsx b/frontend/providers/template/src/components/layout/sidebar.tsx
@@ -1,4 +1,4 @@
-import { SideBarMenu } from '@/store/config';
+import { useSystemConfigStore } from '@/store/config';
 import { useSearchStore } from '@/store/search';
 import { Flex, Text } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
@@ -8,11 +8,12 @@ export default function SideBar() {
   const { t } = useTranslation();
   const { appType, setAppType } = useSearchStore();
   const router = useRouter();
+  const { sideBarMenu } = useSystemConfigStore();
 
   return (
     <Flex flexDirection="column" mt="8px" flex={1}>
-      {SideBarMenu &&
-        SideBarMenu.map((item) => {
+      {sideBarMenu &&
+        sideBarMenu.map((item) => {
           return (
             <Flex
               borderRadius={'4px'}

diff --git a/frontend/providers/template/src/pages/404.tsx b/frontend/providers/template/src/pages/404.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 const NonePage = () => {
   const router = useRouter();

diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx
@@ -134,7 +134,13 @@ export default function AppList() {
                         backgroundColor={'#fff'}
                         border={' 1px solid rgba(255, 255, 255, 0.50)'}
                       >
-                        <Image src={item?.spec?.icon} alt="" width={'36px'} height={'36px'} />
+                        <Image
+                          src={item?.spec?.icon}
+                          alt="logo"
+                          width={'36px'}
+                          height={'36px'}
+                          loading="lazy"
+                        />
                       </Box>
                       <Flex ml="16px" noOfLines={2} flexDirection={'column'}>
                         <Text fontSize={'18px'} fontWeight={600} color={'#111824'}>

diff --git a/frontend/providers/template/src/store/config.ts b/frontend/providers/template/src/store/config.ts
@@ -6,38 +6,49 @@ import { immer } from 'zustand/middleware/immer';
 
 type State = {
   systemConfig: SystemConfigType | undefined;
+  menuKeys: string;
+  sideBarMenu: SideBarMenuType[];
   initSystemConfig: () => Promise<SystemConfigType>;
+  setSideBarMenu: (data: SideBarMenuType[]) => void;
 };
 
-export let SideBarMenu = [
-  {
-    id: 'applications',
-    type: ApplicationType.All,
-    value: 'SideBar.Applications'
-  }
-];
-
 export const useSystemConfigStore = create<State>()(
   devtools(
     immer((set, get) => ({
       systemConfig: undefined,
+      menuKeys: '',
+      sideBarMenu: [
+        {
+          id: 'applications',
+          type: ApplicationType.All,
+          value: 'SideBar.Applications'
+        }
+      ],
       async initSystemConfig() {
         const data = await getSystemConfig();
-
         const { menuKeys } = await getTemplates();
-        const menus = SideBarMenu.concat(
-          menuKeys.split(',').map((i) => ({
+
+        if (get().menuKeys !== menuKeys) {
+          const menus = menuKeys.split(',').map((i) => ({
             id: i,
             type: i as ApplicationType,
             value: `SideBar.${i}`
-          }))
-        );
-        SideBarMenu = menus;
+          }));
+          set((state) => {
+            state.menuKeys = menuKeys;
+            state.sideBarMenu = get().sideBarMenu.concat(menus);
+          });
+        }
 
         set((state) => {
           state.systemConfig = data;
         });
         return data;
+      },
+      setSideBarMenu(data) {
+        set((state) => {
+          state.sideBarMenu = data;
+        });
       }
     }))
   )