Load less data in the open dialog

src/lib/components/OpenCloudDialog.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { getModalStore, getToastStore } from '@skeletonlabs/skeleton'
+  import {
+    ProgressRadial, getModalStore, getToastStore
+  } from '@skeletonlabs/skeleton'
   import wheelStore from '$lib/stores/WheelStore'
   import { getCurrentUser } from '$lib/utils/Firebase'
-  import { getWheels, type ApiWheel } from '$lib/utils/Api'
+  import { getWheel, getWheels, type ApiWheelMeta } from '$lib/utils/Api'
   import { toastDefaults } from '$lib/utils/Toast'
 
   const modalStore = getModalStore()
   const toastStore = getToastStore()
 
   let form: HTMLFormElement
-  let wheels: ApiWheel[] = []
+  let loading = false
+  let wheels: ApiWheelMeta[] = []
 
   onMount(async () => {
     const user = getCurrentUser()
@@ -41,19 +44,38 @@
   })
 
   const open = async () => {
+    if (loading) return
+    loading = true
     const formData = new FormData(form)
     const path = String(formData.get('wheel'))
-    const wheel = wheels.find(wheel => wheel.path === path)
-    if (!wheel) return
-    wheelStore.setConfig(wheel.config)
-    wheelStore.setEntries(wheel.entries)
-    modalStore.close()
-    toastStore.trigger({
-      ...toastDefaults,
-      message: 'Wheel opened',
-      background: 'variant-filled-primary',
-      timeout: 1000
-    })
+    try {
+      const response = await getWheel(path)
+      if (!response.success) {
+        throw new Error('Error opening wheel')
+      }
+      const { config, entries } = response.data.wheel
+      wheelStore.setConfig(config)
+      wheelStore.setEntries(entries)
+      wheelStore.setWinners([])
+      wheelStore.setPath(path)
+      modalStore.close()
+      toastStore.trigger({
+        ...toastDefaults,
+        message: 'Wheel opened',
+        background: 'variant-filled-primary',
+        timeout: 1000
+      })
+    } catch (error) {
+      if (error instanceof Error) {
+        toastStore.trigger({
+          ...toastDefaults,
+          message: error.message,
+          background: 'variant-filled-error'
+        })
+      }
+    } finally {
+      loading = false
+    }
   }
 
   // TODO: Use tabs to separate private and public wheels. Display the wheels in
@@ -79,14 +101,13 @@
     >
       <label class="label">
         <span>Wheel</span>
-
         <select
           name="wheel"
           class="select"
         >
           {#each wheels as wheel}
             <option value={wheel.path}>
-              Wheel: {wheel.config.title}
+              {wheel.title}
             </option>
           {/each}
         </select>
@@ -100,9 +121,12 @@
         >
           Cancel
         </button>
-
         <button class="btn variant-filled-primary">
-          Open
+          {#if loading}
+            <ProgressRadial width="w-6" />
+          {:else}
+            Open
+          {/if}
         </button>
       </footer>
     </form>

src/lib/server/FirebaseAdmin.ts

@@ -43,6 +43,22 @@ export const getWheels = async (uid: string) => {
   return wheelSnaps.map(snap => snap.data() as ApiWheel)
 }
 
+export const getUserWheelsMeta = async (uid: string) => {
+  const userSnap = await db.doc(`users/${uid}`).get()
+  if (!userSnap.exists) {
+    return []
+  }
+  const user = userSnap.data() as ApiUser
+  return await getWheelMetaForPaths(user.wheels)
+}
+
+export const getWheelMetaForPaths = async (paths: string[]) => {
+  const metaSnaps = await db.getAll(
+    ...paths.map(path => db.doc(`wheel-meta/${path}`))
+  )
+  return metaSnaps.map(snap => snap.data() as ApiWheelMeta)
+}
+
 export const saveWheel = async (
   wheel: Omit<ApiWheel, 'path'>, uid: string, visibility: WheelVisibility
 ) => {

src/lib/stores/WheelStore.ts

@@ -7,6 +7,7 @@ interface WheelStoreData {
   config: WheelConfig
   entries: Entry[]
   winners: Entry[]
+  path: string | null
 }
 
 const createWheelStore = (state: WheelStoreData) => {
@@ -33,21 +34,31 @@ const createWheelStore = (state: WheelStoreData) => {
     })
   }
 
+  const setPath = (path: string) => {
+    update(state => {
+      state.path = path
+      return state
+    })
+  }
+
   const reset = () => {
     update(state => {
       state.config = new WheelConfig()
       state.entries = defaultEntries
+      state.winners = []
+      state.path = null
       return state
     })
   }
 
-  return { subscribe, setConfig, setEntries, setWinners, reset }
+  return { subscribe, setConfig, setEntries, setWinners, setPath, reset }
 }
 
 const initialState: WheelStoreData = {
   config: new WheelConfig(),
   entries: defaultEntries,
-  winners: []
+  winners: [],
+  path: null
 }
 
 const localStorageWheelStore = localStorageStore('wheel', initialState)

src/lib/utils/Api.ts

@@ -47,7 +47,7 @@ export const getWheels = async (uid: string, fetch = window.fetch) => {
     '/api/wheels',
     { headers: { authorization: uid } }
   )
-  return await response.json() as ApiResponse<{ wheels: ApiWheel[] }>
+  return await response.json() as ApiResponse<{ wheels: ApiWheelMeta[] }>
 }
 
 export type ApiResponse<T = any> = ApiSuccess<T> | ApiError

src/routes/api/wheels/+server.ts

@@ -1,8 +1,8 @@
 import { z } from 'zod'
 import { SVELTE_WHEEL_API_KEY } from '$env/static/private'
-import { getWheels, saveWheel } from '$lib/server/FirebaseAdmin'
+import { getUserWheelsMeta, saveWheel } from '$lib/server/FirebaseAdmin'
 import { wheelSchema } from '$lib/utils/Schemas'
-import type { ApiError, ApiSuccess, ApiWheel } from '$lib/utils/Api'
+import type { ApiError, ApiSuccess, ApiWheelMeta } from '$lib/utils/Api'
 
 export const GET = async ({ request }) => {
   const uid = request.headers.get('authorization')
@@ -16,12 +16,12 @@ export const GET = async ({ request }) => {
     )
   }
   try {
-    const wheels = await getWheels(uid)
+    const wheels = await getUserWheelsMeta(uid)
     return new Response(
       JSON.stringify({
         success: true,
         data: { wheels }
-      } satisfies ApiSuccess<{ wheels: ApiWheel[] }>),
+      } satisfies ApiSuccess<{ wheels: ApiWheelMeta[] }>),
       { status: 200 }
     )
   } catch (error) {