chore: refactor rerender components

electron/managers/window.ts

@@ -28,6 +28,7 @@ class WindowManager {
       ...mainWindowConfig,
       width: bounds.width,
       height: bounds.height,
+      show: false,
       x: bounds.x,
       y: bounds.y,
       webPreferences: {
@@ -78,6 +79,11 @@ class WindowManager {
         windowManager.hideMainWindow()
       }
     })
+
+    windowManager.mainWindow?.on('ready-to-show', function () {
+      // Feature Toggle for Quick Ask
+      windowManager.mainWindow?.show()
+    })
   }
 
   createQuickAskWindow(preloadPath: string, startUrl: string): void {

web/containers/Providers/DataLoader.tsx

@@ -2,7 +2,12 @@
 
 import { Fragment, ReactNode, useEffect } from 'react'
 
-import { AppConfiguration, getUserHomePath } from '@janhq/core'
+import {
+  AppConfiguration,
+  events,
+  getUserHomePath,
+  ModelEvent,
+} from '@janhq/core'
 import { useSetAtom } from 'jotai'
 
 import useAssistants from '@/hooks/useAssistants'
@@ -30,12 +35,19 @@ const DataLoader: React.FC<Props> = ({ children }) => {
   const setJanDefaultDataFolder = useSetAtom(defaultJanDataFolderAtom)
   const setJanSettingScreen = useSetAtom(janSettingScreenAtom)
 
-  useModels()
   useThreads()
   useAssistants()
   useGetSystemResources()
   useLoadTheme()
 
+  const { loadDataModel, isUpdated } = useModels()
+  useEffect(() => {
+    // Listen for model updates
+    if (isUpdated) {
+      loadDataModel()
+    }
+  }, [isUpdated, loadDataModel])
+
   useEffect(() => {
     window.core?.api
       ?.getAppConfigurations()

web/hooks/useModels.ts

@@ -29,6 +29,7 @@ import {
 const useModels = () => {
   const setDownloadedModels = useSetAtom(downloadedModelsAtom)
   const setExtensionModels = useSetAtom(configuredModelsAtom)
+  let isUpdated = false
 
   const getData = useCallback(() => {
     const getDownloadedModels = async () => {
@@ -52,10 +53,10 @@ const useModels = () => {
 
       setDownloadedModels(toUpdate)
 
-      let isUpdated = false
       toUpdate.forEach((model) => {
         if (!ModelManager.instance().models.has(model.id)) {
           ModelManager.instance().models.set(model.id, model)
+          // eslint-disable-next-line react-hooks/exhaustive-deps
           isUpdated = true
         }
       })
@@ -75,21 +76,28 @@ const useModels = () => {
 
   const reloadData = useDebouncedCallback(() => getData(), 300)
 
+  const getModels = async (): Promise<Model[]> =>
+    extensionManager
+      .get<ModelExtension>(ExtensionTypeEnum.Model)
+      ?.getModels() ?? []
+
   useEffect(() => {
     // Try get data on mount
-    reloadData()
+    if (isUpdated) {
-
+      reloadData()
-    // Listen for model updates
+      // Listen for model updates
-    events.on(ModelEvent.OnModelsUpdate, async () => reloadData())
+      events.on(ModelEvent.OnModelsUpdate, async () => reloadData())
-    return () => {
+      return () => {
-      // Remove listener on unmount
+        // Remove listener on unmount
-      events.off(ModelEvent.OnModelsUpdate, async () => {})
+        events.off(ModelEvent.OnModelsUpdate, async () => {})
+      }
     }
-  }, [getData, reloadData])
+  }, [getData, isUpdated, reloadData])
+
+  return {
+    loadDataModel: getData,
+    isUpdated: isUpdated,
+  }
 }
 
-const getModels = async (): Promise<Model[]> =>
-  extensionManager.get<ModelExtension>(ExtensionTypeEnum.Model)?.getModels() ??
-  []
-
 export default useModels