Lib: Use Promise.all for nested {#await} blocks

src/lib/components/cards/RacePickCard.svelte

@@ -88,8 +88,7 @@
   let dnf_select_value: string = $state(racepick?.dnf ?? "");
 </script>
 
-{#await data.graphics then graphics}
+{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
-  {#await data.drivers then drivers}
   <Card
     imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
       get_driver_headshot_template(graphics)}
@@ -156,13 +155,7 @@
             >
               Save Changes
             </Button>
-              <Button
+            <Button formaction="?/delete_racepick" color="primary" {disabled} submit width="w-1/2">
-                formaction="?/delete_racepick"
-                color="primary"
-                {disabled}
-                submit
-                width="w-1/2"
-              >
               Delete
             </Button>
           {:else}
@@ -180,5 +173,4 @@
       </div>
     </form>
   </Card>
-  {/await}
 {/await}

src/lib/components/cards/RaceResultCard.svelte

@@ -172,8 +172,7 @@
 
     <div class="mt-2 flex flex-col gap-2">
       <!-- PXXs autocomplete chips -->
-      {#await currentrace then current}
+      {#await Promise.all([currentrace, pxxs_whitelist]) then [current, whitelist]}
-        {#await pxxs_whitelist then whitelist}
         <InputChip
           bind:input={pxxs_input}
           bind:value={pxxs_chips}
@@ -186,7 +185,6 @@
           on:remove={on_pxxs_chip_remove}
         />
       {/await}
-      {/await}
       <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
         {#await pxxs_options then options}
           <Autocomplete

src/lib/components/cards/SubstitutionCard.svelte

@@ -56,8 +56,7 @@
   let race_select_value: string = $state(substitution?.race ?? "");
 </script>
 
-{#await data.graphics then graphics}
+{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
-  {#await data.drivers then drivers}
   <Card
     imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
       get_driver_headshot_template(graphics)}
@@ -155,5 +154,4 @@
       </div>
     </form>
   </Card>
-  {/await}
 {/await}

src/routes/racepicks/+page.svelte

@@ -128,9 +128,7 @@
 
           <!-- Only show the userguess if signed in -->
           {#if data.user}
-            {#await data.graphics then graphics}
+            {#await Promise.all( [data.graphics, data.drivers, racepick], ) then [graphics, drivers, pick]}
-              {#await data.drivers then drivers}
-                {#await racepick then pick}
               <div class="mt-2 flex gap-2">
                 <div class="card w-full min-w-40 p-2 pb-0 shadow">
                   <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
@@ -160,20 +158,16 @@
                 </div>
               </div>
             {/await}
-              {/await}
-            {/await}
           {/if}
 
           <!-- Show users that have and have not picked yet -->
-          {#await data.currentpickedusers then currentpicked}
+          {#await Promise.all( [data.graphics, data.currentpickedusers, pickedusers, outstandingusers], ) then [graphics, currentpicked, picked, outstanding]}
             <div class="mt-2 flex gap-2">
-              {#await pickedusers then picked}
               <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
                 <h1 class="text-nowrap font-bold">
                   Picked ({picked.length}/{currentpicked.length}):
                 </h1>
                 <div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
-                    {#await data.graphics then graphics}
                   {#each picked.slice(0, 16) as user}
                     <LazyImage
                       src={user.avatar_url ?? get_driver_headshot_template(graphics)}
@@ -183,17 +177,13 @@
                       imgclass="bg-surface-400 rounded-full"
                     />
                   {/each}
-                    {/await}
                 </div>
               </div>
-              {/await}
-              {#await outstandingusers then outstanding}
               <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
                 <h1 class="text-nowrap font-bold">
                   Outstanding ({outstanding.length}/{currentpicked.length}):
                 </h1>
                 <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
-                    {#await data.graphics then graphics}
                   {#each outstanding.slice(0, 16) as user}
                     <LazyImage
                       src={user.avatar_url ?? get_driver_headshot_template(graphics)}
@@ -203,10 +193,8 @@
                       imgclass="bg-surface-400 rounded-full"
                     />
                   {/each}
-                    {/await}
                 </div>
               </div>
-              {/await}
             </div>
           {/await}
         </div>
@@ -259,8 +247,7 @@
       </div>
     </div>
 
-    {#await data.races then races}
+    {#await Promise.all( [data.races, data.raceresults, data.drivers], ) then [races, raceresults, drivers]}
-      {#await data.raceresults then raceresults}
       {#each raceresults as result}
         {@const race = get_by_value(races, "id", result.race)}
 
@@ -282,15 +269,11 @@
         <div data-popup={race?.id ?? "Invalid"} class="card z-50 p-2 shadow">
           <span class="font-bold">Result:</span>
           <div class="mt-2 flex flex-col gap-1">
-              {#await data.drivers then drivers}
             {#each result.pxxs as pxx, index}
               {@const driver = get_by_value(drivers, "id", pxx)}
               <div class="flex gap-2">
                 <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
-                    <span
+                <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
-                      class="badge w-10 p-1 text-center"
-                      style="background: {PXX_COLORS[index]};"
-                    >
                   {driver?.code}
                 </span>
               </div>
@@ -309,22 +292,15 @@
                 </span>
               </div>
             {/each}
-              {/await}
           </div>
         </div>
       {/each}
     {/await}
-    {/await}
   </div>
 
   <div class="hide-scrollbar flex w-full overflow-x-scroll pb-2">
     <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
-    <!-- TODO: Uhhh can I write this await stuff differently??? -->
+    {#await Promise.all( [data.currentpickedusers, data.racepicks, data.races, data.drivers, data.raceresults], ) then [currentpicked, racepicks, races, drivers, raceresults]}
-    {#await data.currentpickedusers then currentpicked}
-      {#await data.racepicks then racepicks}
-        {#await data.races then races}
-          {#await data.drivers then drivers}
-            {#await data.raceresults then raceresults}
       {#each currentpicked as user}
         {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
 
@@ -359,21 +335,19 @@
             {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
             {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
             {@const dnfcolor =
-                      result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0
+              result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
-                        ? PXX_COLORS[3]
-                        : PXX_COLORS[-1]}
 
             {#if pick}
               <div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
                 <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
                   <span
-                            class="p-1 text-center text-sm w-10 rounded-container-token"
+                    class="w-10 p-1 text-center text-sm rounded-container-token"
                     style="background: {pxxcolor};"
                   >
                     {get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
                   </span>
                   <span
-                            class="p-1 text-center text-sm w-10 rounded-container-token"
+                    class="w-10 p-1 text-center text-sm rounded-container-token"
                     style="background: {dnfcolor};"
                   >
                     {get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
@@ -387,9 +361,5 @@
         </div>
       {/each}
     {/await}
-          {/await}
-        {/await}
-      {/await}
-    {/await}
   </div>
 </div>