ui: refresh selected model (#2002)

ui/desktop/src/components/settings_v2/models/ModelsSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { View } from '../../../App';
 import ModelSettingsButtons from './subcomponents/ModelSettingsButtons';
 import { useConfig } from '../../ConfigContext';
@@ -15,17 +15,7 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
   const [model, setModel] = useState<string>('');
   const { read, getProviders } = useConfig();
 
-  // Use a ref to prevent multiple loads
-  const isLoadingRef = useRef(false);
-  const isLoadedRef = useRef(false);
-
-  useEffect(() => {
-    // Prevent the effect from running again if it's already loading or loaded
-    if (isLoadingRef.current || isLoadedRef.current) return;
-
-    // Mark as loading
-    isLoadingRef.current = true;
-
+  // Function to load model data
   const loadModelData = async () => {
     try {
       const gooseModel = (await read('GOOSE_MODEL', false)) as string;
@@ -47,27 +37,24 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
         setModel(gooseModel);
         setProvider(providerDisplayName);
       }
-
-        // Mark as loaded and not loading
-        isLoadedRef.current = true;
-        isLoadingRef.current = false;
     } catch (error) {
       console.error('Error loading model data:', error);
-        isLoadingRef.current = false;
     }
   };
 
+  useEffect(() => {
+    // Initial load
     loadModelData();
 
-    // Clean up function
-    return () => {
-      isLoadingRef.current = false;
-      isLoadedRef.current = false;
-    };
+    // Set up polling interval to check for changes
+    const interval = setInterval(() => {
+      loadModelData();
+    }, 1000); // Check every second
 
-    // Run this effect only once when the component mounts
-    // We're using refs to control the actual execution, so we don't need dependencies
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Clean up interval on unmount
+    return () => {
+      clearInterval(interval);
+    };
   }, []);
 
   return (