From 20c9b053fa751dfa9db6171cb806e44cfa4edd89 Mon Sep 17 00:00:00 2001
From: secondl1ght <secondl1ght@protonmail.com>
Date: Sat, 9 Dec 2023 18:19:08 -0700
Subject: [PATCH] improve loading about

---
 src/routes/about-us/+layout.svelte | 26 --------------
 src/routes/about-us/+page.svelte   | 54 +++++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 38 deletions(-)
 delete mode 100644 src/routes/about-us/+layout.svelte

diff --git a/src/routes/about-us/+layout.svelte b/src/routes/about-us/+layout.svelte
deleted file mode 100644
index 8b0d7aa1..00000000
--- a/src/routes/about-us/+layout.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { LoadingSplash } from '$lib/comp';
-	import {
-		areaError,
-		areas,
-		elementError,
-		elements,
-		eventError,
-		events,
-		userError,
-		users
-	} from '$lib/store';
-</script>
-
-<svelte:head>
-	<title>BTC Map - About</title>
-	<meta property="og:image" content="https://btcmap.org/images/og/home.png" />
-	<meta property="twitter:title" content="BTC Map - About" />
-	<meta property="twitter:image" content="https://btcmap.org/images/og/home.png" />
-</svelte:head>
-
-{#if ($elements && $elements.length && $users && $users.length && $events && $events.length && $areas && $areas.length) || $elementError || $userError || $eventError || $areaError}
-	<slot />
-{:else}
-	<LoadingSplash page="about us" />
-{/if}
diff --git a/src/routes/about-us/+page.svelte b/src/routes/about-us/+page.svelte
index 7d8f90dc..dbfa78e6 100644
--- a/src/routes/about-us/+page.svelte
+++ b/src/routes/about-us/+page.svelte
@@ -21,6 +21,7 @@
 		userError,
 		users
 	} from '$lib/store';
+	import type { Area, Element } from '$lib/types';
 	import { errToast } from '$lib/utils';
 
 	// alert for element errors
@@ -32,14 +33,40 @@
 	// alert for area errors
 	$: $areaError && errToast($areaError);
 
-	let merchants = $elements
-		.filter((element) => element.tags['boost:expires'])
-		.sort(
-			(a, b) =>
-				// @ts-expect-error
-				Date.parse(b.tags['boost:expires']) - Date.parse(a.tags['boost:expires'])
-		)
-		.slice(0, 6);
+	let dataInitalized = false;
+
+	let merchants: Element[] = [];
+	let communities: Area[] = [];
+
+	const initializeData = () => {
+		if (dataInitalized) return;
+
+		merchants = $elements
+			.filter((element) => element.tags['boost:expires'])
+			.sort(
+				(a, b) =>
+					// @ts-expect-error
+					Date.parse(b.tags['boost:expires']) - Date.parse(a.tags['boost:expires'])
+			)
+			.slice(0, 6);
+
+		populateLeaderboard();
+
+		communities = $areas.filter((area) => featuredCommunities.includes(area.id));
+
+		dataInitalized = true;
+	};
+
+	$: $elements &&
+		$elements.length &&
+		$users &&
+		$users.length &&
+		$events &&
+		$events.length &&
+		$areas &&
+		$areas.length &&
+		!dataInitalized &&
+		initializeData();
 
 	let supertaggers: { id: number; username: string; avatar: string; total: number }[] = [];
 
@@ -71,8 +98,6 @@
 		supertaggers = supertaggers.slice(0, 6);
 	};
 
-	populateLeaderboard();
-
 	const featuredCommunities = [
 		'bitcoin-island-philippines',
 		'btc-curacao',
@@ -82,8 +107,6 @@
 		'free-madeira'
 	];
 
-	const communities = $areas.filter((area) => featuredCommunities.includes(area.id));
-
 	const communityIntegrations = [
 		{ name: 'Coinos', icon: 'coinos', url: 'https://coinos.io/' },
 		{ name: 'Wallet of Satoshi', icon: 'wos', url: 'https://www.walletofsatoshi.com/' },
@@ -200,6 +223,13 @@
 	];
 </script>
 
+<svelte:head>
+	<title>BTC Map - About</title>
+	<meta property="og:image" content="https://btcmap.org/images/og/home.png" />
+	<meta property="twitter:title" content="BTC Map - About" />
+	<meta property="twitter:image" content="https://btcmap.org/images/og/home.png" />
+</svelte:head>
+
 <div class="bg-teal dark:bg-dark">
 	<Header />
 	<div class="mx-auto w-10/12 xl:w-[1200px]">