Optimize sidebar collapsing

src-web/hooks/useTemplateFunctions.ts

@@ -1,14 +1,23 @@
 import { useQuery } from '@tanstack/react-query';
-import type { GetTemplateFunctionsResponse } from '@yaakapp-internal/plugin';
+import type { GetTemplateFunctionsResponse, TemplateFunction } from '@yaakapp-internal/plugin';
+import { atom, useAtomValue } from 'jotai';
+import { useSetAtom } from 'jotai/index';
 import { useState } from 'react';
 import { invokeCmd } from '../lib/tauri';
 import { usePluginsKey } from './usePlugins';
 
+const templateFunctionsAtom = atom<TemplateFunction[]>([]);
+
 export function useTemplateFunctions() {
+  return useAtomValue(templateFunctionsAtom);
+}
+
+export function useSubscribeTemplateFunctions() {
   const pluginsKey = usePluginsKey();
   const [numFns, setNumFns] = useState<number>(0);
+  const setAtom = useSetAtom(templateFunctionsAtom);
 
-  const result = useQuery({
+  useQuery({
     queryKey: ['template_functions', pluginsKey],
     // Fetch periodically until functions are returned
     // NOTE: visibilitychange (refetchOnWindowFocus) does not work on Windows, so we'll rely on this logic
@@ -19,9 +28,9 @@ export function useTemplateFunctions() {
     queryFn: async () => {
       const result = await invokeCmd<GetTemplateFunctionsResponse[]>('cmd_template_functions');
       setNumFns(result.length);
-      return result;
+      const functions = result.flatMap((r) => r.functions) ?? [];
+      setAtom(functions);
+      return functions;
     },
   });
-
-  return result.data?.flatMap((r) => r.functions) ?? [];
 }