From b6b8108d6e445537d2e9ba68f12a0dab62e2d01f Mon Sep 17 00:00:00 2001
From: zhujingyang <72259332+zjy365@users.noreply.github.com>
Date: Tue, 19 Mar 2024 12:25:53 +0800
Subject: [PATCH] feat:optimize app store loading (#4607)

Signed-off-by: jingyang <3161362058@qq.com>
---
 .../template/src/components/layout/index.tsx  |  8 +++-
 .../src/components/layout/sidebar.tsx         |  7 ++--
 frontend/providers/template/src/pages/404.tsx |  2 +-
 .../providers/template/src/pages/index.tsx    |  8 +++-
 .../providers/template/src/store/config.ts    | 39 ++++++++++++-------
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/frontend/providers/template/src/components/layout/index.tsx b/frontend/providers/template/src/components/layout/index.tsx
index 422cb51f6d9..35b46f75685 100644
--- a/frontend/providers/template/src/components/layout/index.tsx
+++ b/frontend/providers/template/src/components/layout/index.tsx
@@ -1,6 +1,7 @@
 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,
@@ -8,6 +9,11 @@ const ShowLayoutRoute: Record<string, boolean> = {
   '/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
index 8aebcdfa2c4..c4dc70faa80 100644
--- 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
index 59e6675dd80..da722b07f86 100644
--- 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
index a36dbaefd59..2a343aaea9a 100644
--- 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
index 8db4c817452..e59aa3072a4 100644
--- 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;
+        });
       }
     }))
   )