improve charts loading

teambtcmap · Dec 14, 2023 · 199c6df · 199c6df
1 parent 37cc27e
commit 199c6df
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/src/routes/community/[area]/+page.svelte b/src/routes/community/[area]/+page.svelte
@@ -1050,11 +1050,11 @@
 						: ''} relative rounded-b-3xl border border-t-0 border-statBorder p-5 dark:bg-white/10"
 				>
 					{#if chartsLoading}
-						<p
-							class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-semibold text-primary dark:text-white"
-						>
-							Loading chart...
-						</p>
+						<div>
+							<i
+								class="fa-solid fa-chart-pie absolute left-1/2 top-1/2 h-52 w-52 -translate-x-1/2 -translate-y-1/2 animate-pulse text-link/50 md:h-60 md:w-60"
+							/>
+						</div>
 					{/if}
 
 					<canvas bind:this={updatedChartCanvas} width="100%" height="250" />
@@ -1279,8 +1279,10 @@
 						<div class="relative">
 							{#if chartsLoading}
 								<div
-									class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-								/>
+									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+								>
+									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+								</div>
 							{/if}
 							<canvas bind:this={upToDateChartCanvas} width="100%" height="400" />
 						</div>
@@ -1294,8 +1296,10 @@
 						<div class="relative">
 							{#if chartsLoading}
 								<div
-									class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-								/>
+									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+								>
+									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+								</div>
 							{/if}
 							<canvas bind:this={totalChartCanvas} width="100%" height="400" />
 						</div>
@@ -1308,8 +1312,10 @@
 						<div class="relative">
 							{#if chartsLoading}
 								<div
-									class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-								/>
+									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+								>
+									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+								</div>
 							{/if}
 							<canvas bind:this={legacyChartCanvas} width="100%" height="400" />
 						</div>
@@ -1323,8 +1329,10 @@
 						<div class="relative">
 							{#if chartsLoading}
 								<div
-									class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-								/>
+									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+								>
+									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+								</div>
 							{/if}
 							<canvas bind:this={paymentMethodChartCanvas} width="100%" height="400" />
 						</div>

diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
@@ -611,8 +611,10 @@
 					<div class="relative">
 						{#if chartsLoading}
 							<div
-								class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-							/>
+								class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+							>
+								<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+							</div>
 						{/if}
 						<canvas bind:this={upToDateChartCanvas} width="100%" height="400" />
 					</div>
@@ -626,8 +628,10 @@
 					<div class="relative">
 						{#if chartsLoading}
 							<div
-								class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-							/>
+								class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+							>
+								<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+							</div>
 						{/if}
 						<canvas bind:this={totalChartCanvas} width="100%" height="400" />
 					</div>
@@ -640,8 +644,10 @@
 					<div class="relative">
 						{#if chartsLoading}
 							<div
-								class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-							/>
+								class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+							>
+								<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+							</div>
 						{/if}
 						<canvas bind:this={legacyChartCanvas} width="100%" height="400" />
 					</div>
@@ -655,8 +661,10 @@
 					<div class="relative">
 						{#if chartsLoading}
 							<div
-								class="absolute left-0 top-0 h-[400px] w-full animate-pulse rounded-3xl border border-link/50"
-							/>
+								class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+							>
+								<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+							</div>
 						{/if}
 						<canvas bind:this={paymentMethodChartCanvas} width="100%" height="400" />
 					</div>

diff --git a/src/routes/leaderboard/+page.svelte b/src/routes/leaderboard/+page.svelte
@@ -222,7 +222,11 @@
 
 			<section id="chart" class="relative">
 				{#if !leaderboard || loading}
-					<div class="absolute left-0 top-0 h-[400px] w-full animate-pulse border border-link/50" />
+					<div
+						class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center border border-link/50"
+					>
+						<i class="fa-solid fa-chart-bar h-24 w-24 animate-pulse text-link/50" />
+					</div>
 				{/if}
 				<canvas bind:this={topTenChartCanvas} width="100%" height="400" />
 			</section>

diff --git a/src/routes/tagger/[id]/+page.svelte b/src/routes/tagger/[id]/+page.svelte
@@ -653,11 +653,11 @@
 					class="relative rounded-b-3xl border border-t-0 border-statBorder p-5 dark:bg-white/10"
 				>
 					{#if !dataInitialized}
-						<p
-							class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-semibold text-primary dark:text-white"
-						>
-							Loading chart...
-						</p>
+						<div>
+							<i
+								class="fa-solid fa-chart-pie absolute left-1/2 top-1/2 h-52 w-52 -translate-x-1/2 -translate-y-1/2 animate-pulse text-link/50 md:h-60 md:w-60"
+							/>
+						</div>
 					{/if}
 
 					<canvas bind:this={tagTypeChartCanvas} width="100%" height="250" />