From 38d5720145e1468d5fe86a5f1f1f3a5757758287 Mon Sep 17 00:00:00 2001 From: Yewolf Date: Fri, 11 Aug 2023 23:57:27 +0200 Subject: [PATCH] feat: loading on interfaces --- backend/api/impl.go | 8 +++++ .../src/lib/components/admin/refills.svelte | 2 +- .../lib/components/borne/fs_loading.svelte | 19 ++++++++++++ .../lib/components/comptoir/newRefill.svelte | 4 +-- .../src/routes/admin/accounts/+page.svelte | 4 +-- .../src/routes/admin/produits/+page.svelte | 2 +- .../admin/restore/accounts/+page.svelte | 4 +-- frontend/src/routes/borne/+page.svelte | 31 +++++++++++++++++-- frontend/src/routes/comptoir/+page.svelte | 30 ++++++++++++++++-- 9 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 frontend/src/lib/components/borne/fs_loading.svelte diff --git a/backend/api/impl.go b/backend/api/impl.go index ee41c33..86a30bb 100644 --- a/backend/api/impl.go +++ b/backend/api/impl.go @@ -69,6 +69,14 @@ func (s *Server) Serve(c *config.Config) error { } }) + // Fake timeout + // e.Use(func(next echo.HandlerFunc) echo.HandlerFunc { + // return func(c echo.Context) error { + // time.Sleep(1000 * time.Millisecond) + // return next(c) + // } + // }) + // You can use h for intellisense and get the handlers' names e.Use(s.AuthMiddleware) diff --git a/frontend/src/lib/components/admin/refills.svelte b/frontend/src/lib/components/admin/refills.svelte index 4d1c137..720f039 100644 --- a/frontend/src/lib/components/admin/refills.svelte +++ b/frontend/src/lib/components/admin/refills.svelte @@ -150,7 +150,7 @@
{ // @ts-ignore @@ -467,7 +467,7 @@
{ // @ts-ignore diff --git a/frontend/src/routes/admin/restore/accounts/+page.svelte b/frontend/src/routes/admin/restore/accounts/+page.svelte index d98684e..78ac788 100644 --- a/frontend/src/routes/admin/restore/accounts/+page.svelte +++ b/frontend/src/routes/admin/restore/accounts/+page.svelte @@ -207,7 +207,7 @@
diff --git a/frontend/src/routes/borne/+page.svelte b/frontend/src/routes/borne/+page.svelte index 7525b80..334c838 100644 --- a/frontend/src/routes/borne/+page.svelte +++ b/frontend/src/routes/borne/+page.svelte @@ -3,10 +3,17 @@ import Pin from '$lib/components/borne/pin.svelte'; import Error from '$lib/components/error.svelte'; - import { AccountState, type CarouselImage, type CarouselText, type ConnectCardRequest } from '$lib/api'; + import { + AccountState, + type CarouselImage, + type CarouselText, + type ConnectCardRequest + } from '$lib/api'; import { onMount } from 'svelte'; import { authApi, carouselApi } from '$lib/requests/requests'; import { goto } from '$app/navigation'; + import FsLoading from '$lib/components/borne/fs_loading.svelte'; + import { api } from '$lib/config/config'; let fakeImages: Array = [ { @@ -32,6 +39,7 @@ } ]; + let display: Boolean = false; let images: Array = fakeImages; let texts: Array = fakeTexts; @@ -39,18 +47,31 @@ fetchCarousel(); }); + const preloadImage = (src: string) => + new Promise((resolve, reject) => { + const image = new Image(); + image.onload = resolve; + image.onerror = reject; + image.src = src; + }); + function fetchCarousel() { carouselApi() .getCarouselImages() .then((res) => { if (res.data != null) images = res.data; if (images.length === 0) images = fakeImages; + Promise.all(images.map((x) => preloadImage(api() + x.image_url))).finally(() => { + setTimeout(() => { + display = true; + }, 500); + }); }); carouselApi() .getCarouselTexts() .then((res) => { - if (res.data != null) texts = res.data; + if (res.data != null) texts = res.data; if (texts.length === 0) texts = fakeTexts; }); @@ -115,4 +136,8 @@ {/if} - +{#if display} + +{:else} + +{/if} diff --git a/frontend/src/routes/comptoir/+page.svelte b/frontend/src/routes/comptoir/+page.svelte index 75293f0..568264f 100644 --- a/frontend/src/routes/comptoir/+page.svelte +++ b/frontend/src/routes/comptoir/+page.svelte @@ -7,6 +7,8 @@ import { onMount } from 'svelte'; import { authApi, carouselApi } from '$lib/requests/requests'; import { goto } from '$app/navigation'; + import FsLoading from '$lib/components/borne/fs_loading.svelte'; + import { api } from '$lib/config/config'; let fakeImages: Array = [ { @@ -32,6 +34,7 @@ } ]; + let display: Boolean = false; let images: Array = fakeImages; let texts: Array = fakeTexts; @@ -39,18 +42,31 @@ fetchCarousel(); }); + const preloadImage = (src: string) => + new Promise((resolve, reject) => { + const image = new Image(); + image.onload = resolve; + image.onerror = reject; + image.src = src; + }); + function fetchCarousel() { carouselApi() .getCarouselImages() .then((res) => { if (res.data != null) images = res.data; if (images.length === 0) images = fakeImages; + Promise.all(images.map((x) => preloadImage(api() + x.image_url))).finally(() => { + setTimeout(() => { + display = true; + }, 500); + }); }); carouselApi() .getCarouselTexts() .then((res) => { - if (res.data != null) texts = res.data; + if (res.data != null) texts = res.data; if (texts.length === 0) texts = fakeTexts; }); @@ -88,7 +104,11 @@ } ) .then((res) => { - if (res.data.account?.role === AccountRole.AccountAdmin || AccountRole.AccountSuperAdmin || AccountRole.AccountMember) + if ( + res.data.account?.role === AccountRole.AccountAdmin || + AccountRole.AccountSuperAdmin || + AccountRole.AccountMember + ) goto('/comptoir'); goto('/comptoir/transactions'); }) @@ -116,4 +136,8 @@ {/if} - +{#if display} + +{:else} + +{/if}