refactor(SettingsPage): implement lazy loading for ProvidersList with Suspense and Spin component; remove unnecessary loading state from ProvidersList

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -7,7 +7,7 @@ import ImageStorage from '@renderer/services/ImageStorage'
 import { INITIAL_PROVIDERS } from '@renderer/store/llm'
 import { Provider } from '@renderer/types'
 import { droppableReorder, generateColorFromChar, getFirstCharacter, uuid } from '@renderer/utils'
-import { Avatar, Button, Dropdown, Input, MenuProps, Spin, Tag } from 'antd'
+import { Avatar, Button, Dropdown, Input, MenuProps, Tag } from 'antd'
 import { Search, UserPen } from 'lucide-react'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -27,7 +27,6 @@ const ProvidersList: FC = () => {
   const [searchText, setSearchText] = useState<string>('')
   const [dragging, setDragging] = useState(false)
   const [providerLogos, setProviderLogos] = useState<Record<string, string>>({})
-  const [ready, setReady] = useState(false)
 
   useEffect(() => {
     const loadAllLogos = async () => {
@@ -242,18 +241,6 @@ const ProvidersList: FC = () => {
     return isProviderMatch || isModelMatch
   })
 
-  useEffect(() => {
-    setTimeout(() => setReady(true), 200)
-  }, [])
-
-  if (!ready) {
-    return (
-      <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-        <Spin />
-      </div>
-    )
-  }
-
   return (
     <Container className="selectable">
       <ProviderListContainer>

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -1,5 +1,6 @@
 import { NavbarCenter, NavbarMain } from '@renderer/components/app/Navbar'
 import ModelSettings from '@renderer/pages/settings/ModelSettings/ModelSettings'
+import { Spin } from 'antd'
 import {
   Cloud,
   Command,
@@ -13,7 +14,7 @@ import {
   TextCursorInput,
   Zap
 } from 'lucide-react'
-import { FC } from 'react'
+import { FC, Suspense } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, Route, Routes, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
@@ -111,7 +112,14 @@ const SettingsPage: FC = () => {
         </SettingMenus>
         <SettingContent>
           <Routes>
-            <Route path="provider" element={<ProvidersList />} />
+            <Route
+              path="provider"
+              element={
+                <Suspense fallback={<Spin />}>
+                  <ProvidersList />
+                </Suspense>
+              }
+            />
             <Route path="model" element={<ModelSettings />} />
             <Route path="web-search" element={<WebSearchSettings />} />
             <Route path="general" element={<GeneralSettings />} />