refactor(ovms): lazy-load OVMS support check with SWR (#12226)

src/renderer/src/hooks/useAppInit.ts

@@ -10,7 +10,7 @@ import { useAppDispatch } from '@renderer/store'
 import { useAppSelector } from '@renderer/store'
 import { handleSaveData } from '@renderer/store'
 import { selectMemoryConfig } from '@renderer/store/memory'
-import { setAvatar, setFilesPath, setIsOvmsSupported, setResourcesPath, setUpdateState } from '@renderer/store/runtime'
+import { setAvatar, setFilesPath, setResourcesPath, setUpdateState } from '@renderer/store/runtime'
 import {
   type ToolPermissionRequestPayload,
   type ToolPermissionResultPayload,
@@ -274,17 +274,4 @@ export function useAppInit() {
   useEffect(() => {
     checkDataLimit()
   }, [])
-
-  useEffect(() => {
-    // Check once when initing
-    window.api.ovms
-      .isSupported()
-      .then((result) => {
-        dispatch(setIsOvmsSupported(result))
-      })
-      .catch((e) => {
-        logger.error('Failed to check isOvmsSupported. Fallback to false.', e as Error)
-        dispatch(setIsOvmsSupported(false))
-      })
-  }, [dispatch])
 }

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

@@ -8,7 +8,6 @@ import {
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import { ProviderAvatar } from '@renderer/components/ProviderAvatar'
 import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
-import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useTimer } from '@renderer/hooks/useTimer'
 import ImageStorage from '@renderer/services/ImageStorage'
 import type { Provider, ProviderType } from '@renderer/types'
@@ -22,6 +21,7 @@ import { startTransition, useCallback, useEffect, useRef, useState } from 'react
 import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
+import useSWRImmutable from 'swr/immutable'
 
 import AddProviderPopup from './AddProviderPopup'
 import ModelNotesPopup from './ModelNotesPopup'
@@ -32,6 +32,16 @@ const logger = loggerService.withContext('ProviderList')
 
 const BUTTON_WRAPPER_HEIGHT = 50
 
+const getIsOvmsSupported = async (): Promise<boolean> => {
+  try {
+    const result = await window.api.ovms.isSupported()
+    return result
+  } catch (e) {
+    logger.warn('Fetching isOvmsSupported failed. Fallback to false.', e as Error)
+    return false
+  }
+}
+
 const ProviderList: FC = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const providers = useAllProviders()
@@ -43,7 +53,8 @@ const ProviderList: FC = () => {
   const [dragging, setDragging] = useState(false)
   const [providerLogos, setProviderLogos] = useState<Record<string, string>>({})
   const listRef = useRef<DraggableVirtualListRef>(null)
-  const { isOvmsSupported } = useRuntime()
+
+  const { data: isOvmsSupported } = useSWRImmutable('ovms/isSupported', getIsOvmsSupported)
 
   const setSelectedProvider = useCallback((provider: Provider) => {
     startTransition(() => _setSelectedProvider(provider))
@@ -278,6 +289,7 @@ const ProviderList: FC = () => {
   }
 
   const filteredProviders = providers.filter((provider) => {
+    // don't show it when isOvmsSupported is loading
     if (provider.id === 'ovms' && !isOvmsSupported) {
       return false
     }

src/renderer/src/store/runtime.ts

@@ -73,7 +73,6 @@ export interface RuntimeState {
   export: ExportState
   chat: ChatState
   websearch: WebSearchState
-  isOvmsSupported: boolean | undefined
 }
 
 export interface ExportState {
@@ -116,8 +115,7 @@ const initialState: RuntimeState = {
   },
   websearch: {
     activeSearches: {}
-  },
+  }
-  isOvmsSupported: undefined
 }
 
 const runtimeSlice = createSlice({
@@ -163,9 +161,6 @@ const runtimeSlice = createSlice({
     setExportState: (state, action: PayloadAction<Partial<ExportState>>) => {
       state.export = { ...state.export, ...action.payload }
     },
-    setIsOvmsSupported: (state, action: PayloadAction<boolean>) => {
-      state.isOvmsSupported = action.payload
-    },
     // Chat related actions
     toggleMultiSelectMode: (state, action: PayloadAction<boolean>) => {
       state.chat.isMultiSelectMode = action.payload
@@ -228,7 +223,6 @@ export const {
   setResourcesPath,
   setUpdateState,
   setExportState,
-  setIsOvmsSupported,
   // Chat related actions
   toggleMultiSelectMode,
   setSelectedMessageIds,