fix memo issues

src/frontend/lib/types/Settings.tsx

@@ -57,4 +57,5 @@ export interface SettingsStateProps {
   pathParams?: PathParams;
   getSetting: (key: string, default_value?: string) => string; // Return a raw setting value
   isSet: (key: string, default_value?: boolean) => boolean; // Check a "boolean" setting
+  getSettingLength: () => number;
 }

src/frontend/src/components/settings/SettingList.tsx

@@ -28,21 +28,34 @@ export function SettingList({
   settingsState,
   keys,
   onChange,
-  onLoaded
+  onLoaded,
+  doGet
 }: Readonly<{
   heading?: string;
   settingsState: SettingsStateProps;
   keys?: string[];
   onChange?: () => void;
   onLoaded?: (settings: SettingsStateProps) => void;
+  doGet?: boolean;
 }>) {
   useEffect(() => {
-    if (settingsState.loaded) {
+    if (settingsState.loaded === true) {
       // Call the onLoaded callback if provided
       onLoaded?.(settingsState);
     }
   }, [settingsState.loaded, settingsState.settings]);
 
+  // get data if doGet is true to break memos leading to hidden group panels
+  useMemo(() => {
+    if (doGet && !settingsState.loaded) {
+      settingsState.fetchSettings().then((success) => {
+        if (success) {
+          onLoaded?.(settingsState);
+        }
+      });
+    }
+  }, [doGet, settingsState]);
+
   const api = useApi();
 
   const allKeys = useMemo(
@@ -226,9 +239,11 @@ export function GlobalSettingList({
 
 export function PluginSettingList({
   pluginKey,
+  doGet,
   onLoaded
 }: Readonly<{
   pluginKey: string;
+  doGet?: boolean;
   onLoaded?: (settings: SettingsStateProps) => void;
 }>) {
   const store = useMemo(
@@ -246,14 +261,22 @@ export function PluginSettingList({
     pluginSettings.fetchSettings();
   }, [pluginSettings.fetchSettings]);
 
-  return <SettingList settingsState={pluginSettings} onLoaded={onLoaded} />;
+  return (
+    <SettingList
+      settingsState={pluginSettings}
+      onLoaded={onLoaded}
+      doGet={doGet}
+    />
+  );
 }
 
 export function PluginUserSettingList({
   pluginKey,
+  doGet,
   onLoaded
 }: Readonly<{
   pluginKey: string;
+  doGet?: boolean;
   onLoaded?: (settings: SettingsStateProps) => void;
 }>) {
   const store = useMemo(
@@ -271,7 +294,13 @@ export function PluginUserSettingList({
     pluginUserSettings.fetchSettings();
   }, [pluginUserSettings.fetchSettings]);
 
-  return <SettingList settingsState={pluginUserSettings} onLoaded={onLoaded} />;
+  return (
+    <SettingList
+      settingsState={pluginUserSettings}
+      onLoaded={onLoaded}
+      doGet={doGet}
+    />
+  );
 }
 
 export function MachineSettingList({

src/frontend/src/pages/Index/Settings/PluginSettingsGroup.tsx

@@ -26,12 +26,14 @@ function PluginSettingGroupItem({
   // Hide the accordion item if there are no settings for this plugin
   const [count, setCount] = useState<number>(0);
   const [wasLoaded, setWasLoaded] = useState<boolean>(false);
+  const [doGet, setDoGet] = useState<boolean>(true);
 
   // Callback once the plugin settings have been loaded
   const onLoaded = useCallback(
     (settings: SettingsStateProps) => {
-      setCount(settings.settings?.length || 0);
+      setCount(settings.getSettingLength());
       setWasLoaded(true);
+      setDoGet(false);
     },
     [pluginKey]
   );
@@ -55,9 +57,17 @@ function PluginSettingGroupItem({
 
       <Accordion.Panel>
         {global ? (
-          <PluginSettingList pluginKey={pluginKey} onLoaded={onLoaded} />
+          <PluginSettingList
+            pluginKey={pluginKey}
+            onLoaded={onLoaded}
+            doGet={doGet}
+          />
         ) : (
-          <PluginUserSettingList pluginKey={pluginKey} onLoaded={onLoaded} />
+          <PluginUserSettingList
+            pluginKey={pluginKey}
+            onLoaded={onLoaded}
+            doGet={doGet}
+          />
         )}
       </Accordion.Panel>
     </Accordion.Item>

src/frontend/src/states/SettingsStates.tsx

@@ -65,6 +65,9 @@ export const useGlobalSettingsState = create<SettingsStateProps>(
     isSet: (key: string, default_value?: boolean) => {
       const value = get().lookup[key] ?? default_value ?? 'false';
       return isTrue(value);
+    },
+    getSettingLength: () => {
+      return Object.keys(get().lookup).length;
     }
   })
 );
@@ -114,6 +117,9 @@ export const useUserSettingsState = create<SettingsStateProps>((set, get) => ({
   isSet: (key: string, default_value?: boolean) => {
     const value = get().lookup[key] ?? default_value ?? 'false';
     return isTrue(value);
+  },
+  getSettingLength: () => {
+    return Object.keys(get().lookup).length;
   }
 }));
 
@@ -185,6 +191,9 @@ export const createPluginSettingsState = ({
     isSet: (key: string, default_value?: boolean) => {
       const value = get().lookup[key] ?? default_value ?? 'false';
       return isTrue(value);
+    },
+    getSettingLength: () => {
+      return Object.keys(get().lookup).length;
     }
   }));
 };
@@ -246,6 +255,9 @@ export const createMachineSettingsState = ({
     isSet: (key: string, default_value?: boolean) => {
       const value = get().lookup[key] ?? default_value ?? 'false';
       return isTrue(value);
+    },
+    getSettingLength: () => {
+      return Object.keys(get().lookup).length;
     }
   }));
 };