improve map loading

src/components/MapLoadingEmbed.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let style: undefined | string = undefined;
+
+	import { LoadingSpinner } from '$lib/comp';
+</script>
+
+<div
+	class="w-full {style} absolute left-0 top-0 z-[10000] flex items-center justify-center bg-teal dark:bg-dark"
+>
+	<div class="space-y-6">
+		<LoadingSpinner color="text-link" />
+		<p class="text-center font-semibold text-primary dark:text-white">Loading map...</p>
+	</div>
+</div>

src/components/MapLoadingMain.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	export let progress: number | undefined;
+
+	import { fade } from 'svelte/transition';
+
+	import { tick } from 'svelte';
+
+	const hideProgressBar = async () => {
+		await tick();
+		progress = undefined;
+	};
+
+	$: progress === 100 && hideProgressBar();
+</script>
+
+{#if progress !== undefined}
+	<div
+		out:fade={{ delay: 1000 }}
+		class="absolute left-1/2 top-1/2 z-[10000] -translate-x-1/2 -translate-y-1/2 space-y-2 rounded-lg border border-primary bg-teal p-4 dark:border-white dark:bg-dark"
+	>
+		<p class="text-center text-primary dark:text-white">Loading map...</p>
+
+		<div class="mx-auto w-[200px] rounded-full bg-link/25">
+			<div
+				class="h-2 rounded-full bg-link transition-all duration-1000"
+				style:width={progress.toString() + '%'}
+			/>
+		</div>
+	</div>
+{/if}

src/lib/comp.ts

@@ -30,7 +30,8 @@ export { default as LeaderboardItem } from '../components/LeaderboardItem.svelte
 export { default as LeaderboardSkeleton } from '../components/LeaderboardSkeleton.svelte';
 export { default as LoadingSpinner } from '../components/LoadingSpinner.svelte';
 export { default as LoadingSplash } from '../components/LoadingSplash.svelte';
-export { default as MapLoading } from '../components/MapLoading.svelte';
+export { default as MapLoadingEmbed } from '../components/MapLoadingEmbed.svelte';
+export { default as MapLoadingMain } from '../components/MapLoadingMain.svelte';
 export { default as MerchantButton } from '../components/MerchantButton.svelte';
 export { default as MerchantEvent } from '../components/MerchantEvent.svelte';
 export { default as MerchantLink } from '../components/MerchantLink.svelte';

src/lib/store.ts

@@ -61,7 +61,6 @@ export const reportError = writable('');
 export const syncStatus: Writable<boolean> = writable();
 
 export const mapUpdates = writable(false);
-export const mapLoading = writable('Loading map...');
 
 export const excludeLeader = readable([
 	17085479, 2104834, 9451067, 616463, 1722488, 81735, 18545877, 232801, 19880430, 1778799

src/lib/sync/elements.ts

@@ -1,4 +1,4 @@
-import { elementError, elements, elementsSyncCount, mapLoading, mapUpdates } from '$lib/store';
+import { elementError, elements, elementsSyncCount, mapUpdates } from '$lib/store';
 import type { Element } from '$lib/types';
 import axios from 'axios';
 import axiosRetry from 'axios-retry';
@@ -10,8 +10,6 @@ axiosRetry(axios, { retries: 3 });
 const limit = 5000;
 
 export const elementsSync = async () => {
-	mapLoading.set('Checking local cache...');
-
 	// clear v1 table if present
 	await localforage
 		.getItem('elements')
@@ -72,8 +70,6 @@ export const elementsSync = async () => {
 				let responseCount;
 				let elementsData: Element[] = [];
 
-				mapLoading.set('Fetching elements...');
-
 				do {
 					try {
 						const response = await axios.get<Element[]>(
@@ -104,17 +100,14 @@ export const elementsSync = async () => {
 				} while (responseCount === limit);
 
 				if (elementsData.length) {
-					mapLoading.set('Storing data...');
 					// set response to local
 					localforage
 						.setItem('elements_v3', elementsData)
 						.then(function () {
-							mapLoading.set('Initial sync complete!');
 							// set response to store
 							elements.set(elementsData);
 						})
 						.catch(function (err) {
-							mapLoading.set('Map loading complete!');
 							elements.set(elementsData);
 							elementError.set(
 								'Could not store elements locally, please try again or contact BTC Map.'
@@ -123,8 +116,6 @@ export const elementsSync = async () => {
 						});
 				}
 			} else {
-				mapLoading.set('Local cache found!');
-
 				// add to sync count to only show data refresh after initial load
 				const count = get(elementsSyncCount);
 				elementsSyncCount.set(count + 1);
@@ -139,8 +130,6 @@ export const elementsSync = async () => {
 				let elementsData = value;
 				let useCachedData = false;
 
-				mapLoading.set('Fetching new elements...');
-
 				do {
 					try {
 						const response = await axios.get<Element[]>(
@@ -169,7 +158,6 @@ export const elementsSync = async () => {
 								elementsData.push(element);
 							});
 						} else {
-							mapLoading.set('Map loading complete!');
 							// set cached elements to store
 							elements.set(value);
 							useCachedData = true;
@@ -190,12 +178,9 @@ export const elementsSync = async () => {
 
 				if (!useCachedData) {
 					// set updated elements locally
-					mapLoading.set('Storing data...');
-
 					localforage
 						.setItem('elements_v3', elementsData)
 						.then(function () {
-							mapLoading.set('Map loading complete!');
 							// set updated elements to store
 							elements.set(elementsData);
 
@@ -230,8 +215,6 @@ export const elementsSync = async () => {
 			let responseCount;
 			let elementsData: Element[] = [];
 
-			mapLoading.set('Fetching elements...');
-
 			do {
 				try {
 					const response = await axios.get<Element[]>(
@@ -262,7 +245,6 @@ export const elementsSync = async () => {
 			} while (responseCount === limit);
 
 			if (elementsData.length) {
-				mapLoading.set('Map loading complete!');
 				// set response to store
 				elements.set(elementsData);
 			}

src/lib/utils.ts

@@ -4,8 +4,6 @@ import type { Chart } from 'chart.js';
 import { get } from 'svelte/store';
 
 export const errToast = (m: string) => {
-	toast.pop();
-
 	toast.push(m, {
 		theme: {
 			'--toastBarBackground': '#DF3C3C'
@@ -14,8 +12,6 @@ export const errToast = (m: string) => {
 };
 
 export const warningToast = (m: string) => {
-	toast.pop();
-
 	toast.push(m, {
 		theme: {
 			'--toastBarBackground': '#FACA15'
@@ -25,8 +21,6 @@ export const warningToast = (m: string) => {
 };
 
 export const successToast = (m: string) => {
-	toast.pop();
-
 	toast.push(m, {
 		theme: {
 			'--toastBarBackground': '#22C55E'

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { mapLoading, syncStatus } from '$lib/store';
+	import { syncStatus } from '$lib/store';
 	import { areasSync } from '$lib/sync/areas';
 	import { elementsSync } from '$lib/sync/elements';
 	import { eventsSync } from '$lib/sync/events';
@@ -26,7 +26,6 @@
 		});
 
 		const dataSync = async () => {
-			$mapLoading = 'Starting data sync...';
 			$syncStatus = true;
 
 			await Promise.allSettled([

src/routes/add-location/+page.svelte

@@ -6,7 +6,7 @@
 		Header,
 		HeaderPlaceholder,
 		InfoTooltip,
-		MapLoading,
+		MapLoadingEmbed,
 		PrimaryButton
 	} from '$lib/comp';
 	import { attribution, changeDefaultIcons, geolocate, toggleMapButtons } from '$lib/map/setup';
@@ -430,8 +430,7 @@
 										class="z-10 h-[300px] !cursor-crosshair rounded-2xl border-2 border-input !bg-teal dark:!bg-dark md:h-[400px]"
 									/>
 									{#if !mapLoaded}
-										<MapLoading
-											type="embed"
+										<MapLoadingEmbed
 											style="h-[300px] md:h-[400px] border-2 border-input rounded-2xl"
 										/>
 									{/if}