Merge pull request #4481 from janhq/chore/engines-data-cache

chore: add caching for engines to improve load time

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

@@ -22,9 +22,7 @@ const TableActiveModel = () => {
     <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

web/containers/ModelDropdown/index.tsx

@@ -196,8 +196,8 @@ const ModelDropdown = ({
     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 { PropsWithChildren } from 'react'
 
 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 DeepLinkListener from './DeepLinkListener'
 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,