From a6f2de922c566f68f56cc60e790d3df1f2f88923 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 18 Nov 2024 16:10:57 +0700
Subject: [PATCH] chore: refactor rerender components

---
 electron/managers/window.ts             |  6 +++++
 web/containers/Providers/DataLoader.tsx | 16 ++++++++++--
 web/hooks/useModels.ts                  | 34 +++++++++++++++----------
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/electron/managers/window.ts b/electron/managers/window.ts
index c9c43ea77..c89e1d7c4 100644
--- a/electron/managers/window.ts
+++ b/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 {
diff --git a/web/containers/Providers/DataLoader.tsx b/web/containers/Providers/DataLoader.tsx
index 4319c5eed..fdd7caae2 100644
--- a/web/containers/Providers/DataLoader.tsx
+++ b/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()
diff --git a/web/hooks/useModels.ts b/web/hooks/useModels.ts
index 400e02793..3f67faaeb 100644
--- a/web/hooks/useModels.ts
+++ b/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()
-
-    // Listen for model updates
-    events.on(ModelEvent.OnModelsUpdate, async () => reloadData())
-    return () => {
-      // Remove listener on unmount
-      events.off(ModelEvent.OnModelsUpdate, async () => {})
+    if (isUpdated) {
+      reloadData()
+      // Listen for model updates
+      events.on(ModelEvent.OnModelsUpdate, async () => reloadData())
+      return () => {
+        // Remove listener on unmount
+        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