Skip to content

Commit

Permalink
no more Loading... :)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robonau
Robonau committed Nov 12, 2023
1 parent 3694915 commit dea6b9c
Show file tree
Hide file tree
Showing 10 changed files with 153 additions and 29 deletions.
16 changes: 8 additions & 8 deletions src/routes/(app)/browse/Nav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,35 @@
href="sources"
class="btn
{$page.url.pathname.includes('/browse/sources')
? 'variant-filled-primary'
: 'variant-ghost-primary'}"
? 'variant-filled-secondary'
: 'variant-ghost-secondary'}"
>
Sources
</a>
<a
href="extensions"
class="btn
{$page.url.pathname.includes('/browse/extensions')
? 'variant-filled-primary'
: 'variant-ghost-primary'}"
? 'variant-filled-secondary'
: 'variant-ghost-secondary'}"
>
Extentions
</a>
<a
href="migrate"
class="btn
{$page.url.pathname.includes('/browse/migrate')
? 'variant-filled-primary'
: 'variant-ghost-primary'}"
? 'variant-filled-secondary'
: 'variant-ghost-secondary'}"
>
Migrate
</a>
<a
href="globalsearch"
class="btn
{$page.url.pathname.includes('/browse/globalsearch')
? 'variant-filled-primary'
: 'variant-ghost-primary'}"
? 'variant-filled-secondary'
: 'variant-ghost-secondary'}"
>
Global Search
</a>
Expand Down
23 changes: 21 additions & 2 deletions src/routes/(app)/browse/extensions/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,27 @@
</script>

<Nav let:scrollingElement>
{#if $extensions == undefined || $extensions.loading}
Loading...
{#if $extensions === undefined || $extensions.loading}
<div class="px-4">
{#each new Array(5) as _}
<div class="h-8 md:h-10 m-2 placeholder animate-pulse max-w-xs" />
{#each new Array(5) as _}
<div class="h-28 m-1">
<div class="card variant-ghost flex w-full h-full items-center">
<div class="p-1 h-full w-auto">
<div class="placeholder animate-pulse h-full w-auto rounded-lg aspect-square" />
</div>
<div class="w-full h-full max-w-xs flex flex-col justify-center">
<div class="placeholder animate-pulse my-2 max-w-[10rem]" />
<div class="my-2">
<div class="placeholder animate-pulse" />
</div>
</div>
</div>
</div>
{/each}
{/each}
</div>
{:else if $extensions.error}
{JSON.stringify($extensions.error)}
{:else if groupExtensions}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(app)/browse/extensions/ExtensionCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
class="h-28 m-1"
>
{#if intersecting}
<div class="card variant-ghost-primary flex w-full h-full items-center">
<div class="card variant-ghost flex w-full h-full items-center">
<div class="p-1 h-full flex-shrink-0">
<Image height="h-full" width="w-auto" aspect="aspect-square" src={ext.iconUrl} />
</div>
Expand Down
20 changes: 18 additions & 2 deletions src/routes/(app)/browse/migrate/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,21 @@

<Nav let:scrollingElement>
{#if $Migration.loading}
Loading...
{#each new Array(8) as _}
<div class="h-24 m-1">
<div class="card variant-ghost flex w-full h-full items-center">
<div class="p-1 h-full w-auto">
<div class="placeholder animate-pulse h-full w-auto rounded-lg aspect-square" />
</div>
<div class="w-full h-full flex flex-col justify-center">
<div class="placeholder animate-pulse my-2 max-w-[10rem]" />
</div>
<div class="p-1 flex h-full items-center">
<div class="badge variant-filled-primary h-6 w-6" />
</div>
</div>
</div>
{/each}
{:else if $Migration.error}
{JSON.stringify($Migration.error)}
{:else if $Migration.errors}
Expand All @@ -63,7 +77,9 @@
>
{#if intersecting}
<a href="migrate/source/{source.id}">
<div class="flex h-full items-center hover:variant-glass">
<div
class="card m-1 flex h-full items-center variant-glass hover:variant-glass-primary"
>
<div class="p-1 h-full">
<Image src={source.iconUrl} aspect="aspect-square" width="h-auto" />
</div>
Expand Down
15 changes: 14 additions & 1 deletion src/routes/(app)/browse/migrate/source/[SourceID]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,20 @@
</script>

{#if $Manga.loading}
Loading...
<div class="yoy grid m-2 gap-2 {gridValues}">
{#each new Array(30) as _}
<div class="aspect-cover w-full">
<div
class="placeholder animate-pulse h-full
{$Meta.Display === display.Compact && 'rounded-lg'}
{$Meta.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
/>
{#if $Meta.Display === display.Comfortable}
<div class="placeholder animate-pulse px-2 h-12 text-center rounded-none rounded-b-lg" />
{/if}
</div>
{/each}
</div>
{:else if $Manga.error}
{JSON.stringify($Manga.error)}
{:else if $Manga.errors}
Expand Down
8 changes: 5 additions & 3 deletions src/routes/(app)/browse/source/[sourceID]/NavActions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@
<a
href="./popular"
class="btn rounded-none
{$page.url.pathname.includes('/popular') ? 'variant-ghost-primary' : 'variant-glass-primary'}"
{$page.url.pathname.includes('/popular')
? 'variant-filled-secondary'
: 'variant-ghost-secondary'}"
>
Popular
</a>
{#if supportsLatest}
<a
href="./latest"
class="btn rounded-none
{$page.url.pathname.includes('/latest') ? 'variant-ghost-primary' : 'variant-glass-primary'}"
{$page.url.pathname.includes('/latest') ? 'variant-filled-secondary' : 'variant-ghost-secondary'}"
>
Latest
</a>
{/if}
<a
href="./filter"
class="btn rounded-none
{$page.url.pathname.includes('/filter') ? 'variant-ghost-primary' : 'variant-glass-primary'}"
{$page.url.pathname.includes('/filter') ? 'variant-filled-secondary' : 'variant-ghost-secondary'}"
>
Filter
</a>
Expand Down
37 changes: 29 additions & 8 deletions src/routes/(app)/browse/sources/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,33 @@
}
</script>

{#if $sources.error}
{JSON.stringify($sources.error)}
{:else if $sources.loading}
Loading...
{:else if groupSources}
<Nav let:scrollingElement>
<Nav let:scrollingElement>
{#if $sources.error}
{JSON.stringify($sources.error)}
{:else if $sources.loading}
{#each new Array(5) as _}
<div class=" py-4 px-8">
<div class="h-12 placeholder animate-pulse" />
</div>
<div
class="grid xs:grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 2xl:grid-cols-12 gap-2 mx-2"
>
{#each new Array(5) as _}
<div class="aspect-cover card relative">
<div class=" w-full h-full p-4">
<div class="w-full h-auto aspect-square rounded-lg placeholder animate-pulse" />
</div>
<div class="absolute bottom-0 left-0 right-0 variant-glass-surface rounded-b-olg">
<div class="px-2 h-12 text-center">
<div class="placeholder animate-pulse my-1" />
<div class="placeholder animate-pulse" />
</div>
</div>
</div>
{/each}
</div>
{/each}
{:else if groupSources}
{#each groupSources.filter((ele) => ele[1].length) as [Lang, sous]}
<div class="text-5xl py-4 px-8">
{ISOLanguages.find((ele) => ele.code.toLowerCase() === Lang.toLowerCase())?.nativeName ??
Expand Down Expand Up @@ -97,5 +118,5 @@
top right.
</p>
</div>
</Nav>
{/if}
{/if}
</Nav>
23 changes: 22 additions & 1 deletion src/routes/(app)/downloads/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,28 @@
</script>

{#if !$downloads}
Loading...
{#each new Array(15) as _}
<div class="h-28">
<div class="hover:variant-glass-surface px-4 h-full flex flex-nowrap items-center">
<div class="py-1 h-full aspect-cover mr-2">
<div class="placeholder animate-pulse aspect-cover h-full w-auto rounded-lg" />
</div>
<div class="w-full py-4">
<div class="placeholder animate-pulse max-w-xs mb-1" />
<div class="placeholder animate-pulse max-w-sm mb-1" />
<div class="flex max-w-3xl items-center">
<div class="placeholder animate-pulse w-10 mr-2" />
<div class="placeholder animate-pulse h-2 w-full" />
</div>
</div>
<div class="h-full py-4">
<div class="w-auto h-full aspect-square p-4">
<div class="placeholder animate-pulse h-full w-full" />
</div>
</div>
</div>
</div>
{/each}
{:else if $downloads.errors}
{JSON.stringify($downloads.errors)}
{:else if filteredQueue}
Expand Down
15 changes: 14 additions & 1 deletion src/routes/(app)/settings/about/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,20 @@
</script>

{#if $about.loading}
loading...
{#if window.version}
<div class="pl-4 py-2">
<div class="text-xl">client version</div>
<div class="opacity-80">
VUI-{window.version}
</div>
</div>
{/if}
{#each new Array(5) as _}
<div class="pl-4 py-2">
<div class="placeholder animate-pulse w-full max-w-xs mb-1 h-7" />
<div class="placeholder animate-pulse w-full max-w-sm h-6" />
</div>
{/each}
{:else if $about.error}
{JSON.stringify($about.error)}
{:else if $about.data}
Expand Down
23 changes: 21 additions & 2 deletions src/routes/(app)/settings/categories/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,26 @@
</script>

{#if $categories.loading}
Loading...
{#each new Array(5) as _}
<div
class="text-left flex items-center w-full h-16 hover:variant-glass-surface cursor-pointer p-2"
>
<div class="placeholder animate-pulse h-full aspect-square w-auto" />
<div class=" w-full">
<div class="placeholder animate-pulse max-w-xs mx-2" />
</div>
<div class="sm:mr-8 h-full flex">
{#each new Array(4) as _}
<div class="placeholder animate-pulse h-full aspect-square w-auto" />
{/each}
</div>
<div class="placeholder animate-pulse h-full aspect-square w-auto" />
<div class="placeholder animate-pulse h-full aspect-square w-auto" />
</div>
<div class="fixed bottom-2 right-2">
<div class="placeholder animate-pulse h-16 w-16 rounded-full" />
</div>
{/each}
{:else if $categories.error}
{JSON.stringify($categories.error)}
{:else if $categories.data.categories.nodes}
Expand All @@ -106,7 +125,7 @@
.sort((a, b) => (a.order > b.order ? 1 : -1)) as cat}
<button
on:click={(e) => edit(e, cat)}
class=" text-left flex items-center w-full h-16 hover:variant-glass-surface cursor-pointer p-2"
class="text-left flex items-center w-full h-16 hover:variant-glass-surface cursor-pointer p-2"
>
<IconWrapper class="h-full w-auto" name="mdi:theme" />
<div class="w-full px-2">{cat.name}</div>
Expand Down

0 comments on commit dea6b9c

Please sign in to comment.