fix: global data not warming up correctly after hydration

app/composables/useAgents.ts

@@ -22,8 +22,8 @@ export const useAgents = () => {
         initPromise: Promise<void> | null;
     };
 
-    const init = () => {
+    const init = (): Promise<void> => {
-        if (state.initPromise) return;
+        if (state.initPromise) return state.initPromise;
 
         state.initPromise = (async () => {
             const query = triplit.query('agents')
@@ -32,10 +32,13 @@ export const useAgents = () => {
 
             const { results } = await useQuery('agents', triplit, query)
             watch(results, (newAgents) => {
-                console.log("newAgents", newAgents);
+                if (newAgents && newAgents.length > 0) {
-                state.list.value = newAgents as unknown as Agent[] || [];
+                    state.list.value = newAgents as unknown as Agent[];
+                }
             }, { immediate: true, flush: 'sync' });
         })();
+
+        return state.initPromise;
     };
 
     const getAgent = (id: MaybeRef<string>) => {

app/composables/useModels.ts

@@ -29,17 +29,21 @@ export const useModels = () => {
         initPromise: Promise<void> | null;
     };
 
-    const init = () => {
+    const init = (): Promise<void> => {
-        if (state.initPromise) return;
+        if (state.initPromise) return state.initPromise;
 
         state.initPromise = (async () => {
             const query = triplit.query('providers').Include('models');
 
             const { results } = await useQuery('providers', triplit, query)
             watch(results, (newProviders) => {
-                state.providers.value = newProviders as unknown as ProviderWithModels[] || [];
+                if (newProviders && newProviders.length > 0) {
+                    state.providers.value = newProviders as unknown as ProviderWithModels[];
+                }
             }, { immediate: true, flush: 'sync' });
         })();
+
+        return state.initPromise;
     };
 
     const allModels = computed<ModelWithProvider[]>(() => {

app/composables/useUserSettings.ts

@@ -33,7 +33,7 @@ export const useUserSettings = () => {
 
     const state = nuxtApp._userSettingsState as UserSettingsState;
 
-    const init = () => {
+    const init = (): Promise<void> => {
         if (state.initPromise) return state.initPromise;
 
         state.initPromise = (async () => {

app/plugins/global-data.ts

@@ -1,11 +1,13 @@
-export default defineNuxtPlugin(async () => {
+export default defineNuxtPlugin({
+    name: 'global-data',
+    enforce: 'pre',
+    async setup() {
+        await Promise.all([
+            useAgents().init(),
+            useModels().init(),
+            useUserSettings().init()
+        ]);
 
-    // Warm up the caches
+        console.log('Global data ready');
-    await Promise.all([
+    }
-        useAgents().init(),
-        useModels().init(),
-        useUserSettings().init()
-    ]);
-
-    console.log('Global data ready');
 });