christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Seasonpicks: Fix accordion lag
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-27 00:55:58 +01:00
parent 63ba16bd4d
commit d4d44a79f6
1 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/routes/seasonpicks/+page.svelte
View File

@ -59,7 +59,7 @@
</svelte:head> </svelte:head>
<!-- Await this here so the accordion doesn't lag when opening --> <!-- Await this here so the accordion doesn't lag when opening -->
{#await Promise.all([data.drivers, data.teams]) then [drivers, teams]} {#await Promise.all( [data.drivers, data.teams, data.seasonpicks, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, seasonpicks, currentpicked, picked, outstanding]}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full"> <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
<AccordionItem> <AccordionItem>
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment> <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
@ -191,48 +191,46 @@
{/if} {/if}
<!-- Show users that have and have not picked yet --> <!-- Show users that have and have not picked yet -->
{#await Promise.all( [data.seasonpicks, data.seasonpickedusers, pickedusers, outstandingusers], ) then [seasonpicks, currentpicked, picked, outstanding]} {#if seasonpicks.length === 0}
{#if seasonpicks.length === 0} <div class="mt-2 flex gap-2">
<div class="mt-2 flex gap-2"> <div
<div class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40" >
> <h1 class="text-nowrap font-bold">
<h1 class="text-nowrap font-bold"> Picked ({picked.length}/{currentpicked.length}):
Picked ({picked.length}/{currentpicked.length}): </h1>
</h1> <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> {#each picked.slice(0, 16) as user}
{#each picked.slice(0, 16) as user} <LazyImage
<LazyImage src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)} imgwidth={AVATAR_WIDTH}
imgwidth={AVATAR_WIDTH} imgheight={AVATAR_HEIGHT}
imgheight={AVATAR_HEIGHT} containerstyle="height: 35px; width: 35px;"
containerstyle="height: 35px; width: 35px;" imgclass="bg-surface-400 rounded-full"
imgclass="bg-surface-400 rounded-full" />
/> {/each}
{/each}
</div>
</div>
<div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
>
<h1 class="text-nowrap font-bold">
Missing ({outstanding.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each outstanding.slice(0, 16) as user}
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;"
imgclass="bg-surface-400 rounded-full"
/>
{/each}
</div>
</div> </div>
</div> </div>
{/if} <div
{/await} class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
>
<h1 class="text-nowrap font-bold">
Missing ({outstanding.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each outstanding.slice(0, 16) as user}
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;"
imgclass="bg-surface-400 rounded-full"
/>
{/each}
</div>
</div>
</div>
{/if}
</div> </div>
</svelte:fragment> </svelte:fragment>
</AccordionItem> </AccordionItem>