chore: add caching for engines to improve load time

web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx

@@ -22,9 +22,7 @@
     <div className="w-1/2">
       <div className="overflow-hidden border-b border-[hsla(var(--app-border))]">
         <table className="w-full px-8">
-          {activeModel &&
-          engines &&
-          isLocalEngine(engines, activeModel.engine) ? (
+          {activeModel && isLocalEngine(engines, activeModel.engine) ? (
             <tbody>
               <tr>
                 <td
@@ -50,9 +48,9 @@
                             : 'primary'
                         }
                         onClick={() => {
                           stopModel()
                           window.core?.api?.stopServer()
                           setServerEnabled(false)
                         }}
                       >
                         Stop

web/containers/ModelDropdown/index.tsx

@@ -123,8 +123,8 @@
 
   const handleChangeStateOpen = useCallback(
     (state: boolean) => {
       setOpen(state)
       setModelDropdownState(state)
     },
     [setModelDropdownState]
   )
@@ -134,7 +134,7 @@
       configuredModels
         .concat(
           downloadedModels.filter(
             (e) => !configuredModels.some((x) => x.id === e.id)
           )
         )
         .filter((e) =>
@@ -143,26 +143,26 @@
         .filter((e) => {
           if (searchFilter === 'local') {
             return (
               engineList.find((t) => t.engine?.engine === e.engine)?.type ===
               'local'
             )
           }
           return true
         })
         .sort((a, b) => a.name.localeCompare(b.name))
         .sort((a, b) => {
           const aInDownloadedModels = downloadedModels.some(
             (item) => item.id === a.id
           )
           const bInDownloadedModels = downloadedModels.some(
             (item) => item.id === b.id
           )
           if (aInDownloadedModels && !bInDownloadedModels) {
             return -1
           } else if (!aInDownloadedModels && bInDownloadedModels) {
             return 1
           } else {
             return 0
           }
         }),
     [configuredModels, searchText, searchFilter, downloadedModels, engineList]
@@ -196,8 +196,8 @@
     const model = downloadedModels.find((model) => model.id === modelId)
     if (model) {
       if (
-        engines?.[model.engine]?.[0].type === 'local' ||
-        (engines?.[model.engine]?.[0].api_key?.length ?? 0) > 0
+        engines?.[model.engine]?.[0]?.type === 'local' ||
+        (engines?.[model.engine]?.[0]?.api_key?.length ?? 0) > 0
       )
         setSelectedModel(model)
     } else {

web/containers/Providers/SWRConfigProvider.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+
+import { SWRConfig } from 'swr'
+
+function SWRConfigProvider({ children }: { children: React.ReactNode }) {
+  // https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache
+  // When initializing, we restore the data from `localStorage` into a map.
+
+  const map = React.useMemo(() => new Map<string, object>(), [])
+  React.useEffect(() => {
+    const savedCache = JSON.parse(
+      window.localStorage.getItem('app-cache') || '[]'
+    )
+    savedCache.forEach(([key, value]: [string, object]) => {
+      map.set(key, value)
+    })
+
+    // Before unloading the app, we write back all the data into `localStorage`.
+    window.addEventListener('beforeunload', () => {
+      const appCache = JSON.stringify(Array.from(map.entries()))
+      window.localStorage.setItem('app-cache', appCache)
+    })
+  }, [map])
+
+  return <SWRConfig value={{ provider: () => map }}>{children}</SWRConfig>
+}
+
+export default SWRConfigProvider

web/containers/Providers/index.tsx

@@ -4,6 +4,8 @@
 
 import { Toaster } from 'react-hot-toast'
 
+import { SWRConfig } from 'swr'
+
 import EventListener from '@/containers/Providers/EventListener'
 import JotaiWrapper from '@/containers/Providers/Jotai'
 
@@ -18,27 +20,30 @@
 import KeyListener from './KeyListener'
 import Responsive from './Responsive'
 
+import SWRConfigProvider from './SWRConfigProvider'
 import SettingsHandler from './SettingsHandler'
 
 const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <ThemeWrapper>
-      <JotaiWrapper>
-        <Umami />
-        <CoreConfigurator>
-          <>
-            <Responsive />
-            <KeyListener />
-            <EventListener />
-            <DataLoader />
-            <SettingsHandler />
-            <DeepLinkListener />
-            <Toaster />
-            {children}
-          </>
-        </CoreConfigurator>
-      </JotaiWrapper>
-    </ThemeWrapper>
+    <SWRConfigProvider>
+      <ThemeWrapper>
+        <JotaiWrapper>
+          <Umami />
+          <CoreConfigurator>
+            <>
+              <Responsive />
+              <KeyListener />
+              <EventListener />
+              <DataLoader />
+              <SettingsHandler />
+              <DeepLinkListener />
+              <Toaster />
+              {children}
+            </>
+          </CoreConfigurator>
+        </JotaiWrapper>
+      </ThemeWrapper>
+    </SWRConfigProvider>
   )
 }
 

web/screens/Settings/MyModels/MyModelList/index.tsx

@@ -2,7 +2,7 @@ import { memo, useState } from 'react'
 
 import { Model } from '@janhq/core'
 import { Badge, Button, Tooltip, useClickOutside } from '@janhq/joi'
-import { useAtom, useAtomValue } from 'jotai'
+import { useAtom } from 'jotai'
 import {
   MoreVerticalIcon,
   PlayIcon,