♻️ refactor: refactor provider info and improve settings side bar loading (#5268)

* refactor provider info

* fix loading

* fix ollama models

* fix loading

Author: arvinxx

package.json

@@ -129,7 +129,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^1.56.0",
     "@lobehub/tts": "^1.25.1",
-    "@lobehub/ui": "^1.155.7",
+    "@lobehub/ui": "^1.155.8",
     "@neondatabase/serverless": "^0.10.1",
     "@next/third-parties": "^15.0.0",
     "@react-spring/web": "^9.7.5",

src/app/(main)/settings/_layout/Desktop/SideBar.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+import CircleLoading from '@/components/Loading/CircleLoading';
 import PanelTitle from '@/components/PanelTitle';
 
 const useStyles = createStyles(({ token, css }) => ({
@@ -33,7 +35,9 @@ const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLay
       {...rest}
     >
       <PanelTitle desc={desc || t('header.desc')} title={title || t('header.title')} />
-      <Flexbox flex={1}>{children}</Flexbox>
+      <Flexbox flex={1}>
+        <Suspense fallback={<CircleLoading />}>{children}</Suspense>
+      </Flexbox>
       <BrandWatermark paddingInline={12} />
     </Flexbox>
   );