fix: hub refresh state (#5190)

web-app/src/hooks/useModelSources.ts

@@ -8,6 +8,37 @@ import {
 
 // Service functions for model sources
 
+// Deep comparison function for model sources
+const deepCompareModelSources = (
+  sources1: ModelSource[],
+  sources2: ModelSource[]
+): boolean => {
+  if (sources1.length !== sources2.length) return false
+
+  return sources1.every((source1, index) => {
+    const source2 = sources2[index]
+    if (!source2) return false
+
+    // Compare basic properties
+    if (source1.id !== source2.id || source1.author !== source2.author) {
+      return false
+    }
+
+    // Compare metadata
+    if (JSON.stringify(source1.metadata) !== JSON.stringify(source2.metadata)) {
+      return false
+    }
+
+    // Compare models array
+    if (source1.models.length !== source2.models.length) return false
+
+    return source1.models.every((model1, modelIndex) => {
+      const model2 = source2.models[modelIndex]
+      return JSON.stringify(model1) === JSON.stringify(model2)
+    })
+  })
+}
+
 // Zustand store for model sources
 type ModelSourcesState = {
   sources: ModelSource[]
@@ -18,7 +49,7 @@ type ModelSourcesState = {
   deleteSource: (source: string) => Promise<void>
 }
 
-export const useModelSources = create<ModelSourcesState>()((set) => ({
+export const useModelSources = create<ModelSourcesState>()((set, get) => ({
   sources: [],
   error: null,
   loading: false,
@@ -26,8 +57,14 @@ export const useModelSources = create<ModelSourcesState>()((set) => ({
   fetchSources: async () => {
     set({ loading: true, error: null })
     try {
-      const sources = await fetchModelSources()
+      const newSources = await fetchModelSources()
-      set({ sources, loading: false })
+      const currentSources = get().sources
+
+      if (!deepCompareModelSources(currentSources, newSources)) {
+        set({ sources: newSources, loading: false })
+      } else {
+        set({ loading: false })
+      }
     } catch (error) {
       set({ error: error as Error, loading: false })
     }
@@ -37,8 +74,14 @@ export const useModelSources = create<ModelSourcesState>()((set) => ({
     set({ loading: true, error: null })
     try {
       await addModelSource(source)
-      const sources = await fetchModelSources()
+      const newSources = await fetchModelSources()
-      set({ sources, loading: false })
+      const currentSources = get().sources
+
+      if (!deepCompareModelSources(currentSources, newSources)) {
+        set({ sources: newSources, loading: false })
+      } else {
+        set({ loading: false })
+      }
     } catch (error) {
       set({ error: error as Error, loading: false })
     }
@@ -48,8 +91,14 @@ export const useModelSources = create<ModelSourcesState>()((set) => ({
     set({ loading: true, error: null })
     try {
       await deleteModelSource(source)
-      const sources = await fetchModelSources()
+      const newSources = await fetchModelSources()
-      set({ sources, loading: false })
+      const currentSources = get().sources
+
+      if (!deepCompareModelSources(currentSources, newSources)) {
+        set({ sources: newSources, loading: false })
+      } else {
+        set({ loading: false })
+      }
     } catch (error) {
       set({ error: error as Error, loading: false })
     }