chore: engines data cache - improve ux

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 &&
+          {activeModel && isLocalEngine(engines, activeModel.engine) ? (
-          engines &&
-          isLocalEngine(engines, activeModel.engine) ? (
             <tbody>
               <tr>
                 <td

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>
+    <SWRConfigProvider>
-      <JotaiWrapper>
+      <ThemeWrapper>
-        <Umami />
+        <JotaiWrapper>
-        <CoreConfigurator>
+          <Umami />
-          <>
+          <CoreConfigurator>
-            <Responsive />
+            <>
-            <KeyListener />
+              <Responsive />
-            <EventListener />
+              <KeyListener />
-            <DataLoader />
+              <EventListener />
-            <SettingsHandler />
+              <DataLoader />
-            <DeepLinkListener />
+              <SettingsHandler />
-            <Toaster />
+              <DeepLinkListener />
-            {children}
+              <Toaster />
-          </>
+              {children}
-        </CoreConfigurator>
+            </>
-      </JotaiWrapper>
+          </CoreConfigurator>
-    </ThemeWrapper>
+        </JotaiWrapper>
+      </ThemeWrapper>
+    </SWRConfigProvider>
   )
 }