diff --git a/src/components/MapLoading.svelte b/src/components/MapLoading.svelte
deleted file mode 100644
index 66b8e081..00000000
--- a/src/components/MapLoading.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	export let type: 'main' | 'embed';
-	export let message: undefined | string = undefined;
-	export let style: undefined | string = undefined;
-
-	import { LoadingSpinner } from '$lib/comp';
-	// @ts-expect-error
-	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
-</script>
-
-{#if type === 'main'}
-	<div class="w-full bg-teal dark:bg-dark {style}">
-		<div class="mx-auto w-10/12 xl:w-[1200px]">
-			<div class="flex h-[100vh] w-full items-center justify-center">
-				<main class="space-y-10">
-					{#if typeof window !== 'undefined'}
-						<div class="mx-auto w-52">
-							<LottiePlayer
-								src="/lottie/loading.json"
-								autoplay={true}
-								loop={true}
-								controls={false}
-								renderer="svg"
-								background="transparent"
-							/>
-						</div>
-					{/if}
-					<h1 class="text-center text-4xl font-semibold text-primary dark:text-white md:text-5xl">
-						{message}
-					</h1>
-				</main>
-			</div>
-		</div>
-	</div>
-{:else if type === 'embed'}
-	<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">Rendering map...</p>
-		</div>
-	</div>
-{/if}
diff --git a/src/components/MapLoadingEmbed.svelte b/src/components/MapLoadingEmbed.svelte
new file mode 100644
index 00000000..368c37e0
--- /dev/null
+++ b/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>
diff --git a/src/components/MapLoadingMain.svelte b/src/components/MapLoadingMain.svelte
new file mode 100644
index 00000000..88702d40
--- /dev/null
+++ b/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}
diff --git a/src/lib/comp.ts b/src/lib/comp.ts
index c6b4791f..878e7758 100644
--- a/src/lib/comp.ts
+++ b/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';
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 783d5cf3..3a3ffd1e 100644
--- a/src/lib/store.ts
+++ b/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
diff --git a/src/lib/sync/elements.ts b/src/lib/sync/elements.ts
index 7b3815ec..d10d6d39 100644
--- a/src/lib/sync/elements.ts
+++ b/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);
 			}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 10756eb5..e6b6fc93 100644
--- a/src/lib/utils.ts
+++ b/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'
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e8697fb9..64d4c4ab 100644
--- a/src/routes/+layout.svelte
+++ b/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([
diff --git a/src/routes/add-location/+page.svelte b/src/routes/add-location/+page.svelte
index 481ec899..e17c44f6 100644
--- a/src/routes/add-location/+page.svelte
+++ b/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}
diff --git a/src/routes/communities/map/+layout.svelte b/src/routes/communities/map/+layout.svelte
deleted file mode 100644
index d04c25a7..00000000
--- a/src/routes/communities/map/+layout.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { MapLoading } from '$lib/comp';
-	import { areaError, areas, reportError, reports } from '$lib/store';
-	import { errToast } from '$lib/utils';
-
-	// alert for area errors
-	$: $areaError && errToast($areaError);
-
-	// alert for report errors
-	$: $reportError && errToast($reportError);
-</script>
-
-<svelte:head>
-	<title>BTC Map - Community Map</title>
-	<meta property="og:image" content="https://btcmap.org/images/og/communities.png" />
-	<meta property="twitter:title" content="BTC Map - Community Map" />
-	<meta property="twitter:image" content="https://btcmap.org/images/og/communities.png" />
-</svelte:head>
-
-<h1 class="hidden">Community Map</h1>
-
-{#if $areas && $areas.length && $reports && $reports.length}
-	<slot />
-{:else}
-	<MapLoading type="main" message="Loading community map..." />
-{/if}
diff --git a/src/routes/communities/map/+page.svelte b/src/routes/communities/map/+page.svelte
index 8a6e8836..134edcda 100644
--- a/src/routes/communities/map/+page.svelte
+++ b/src/routes/communities/map/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
-	import { MapLoading, Socials } from '$lib/comp';
+	import { MapLoadingMain, Socials } from '$lib/comp';
 	import {
 		attribution,
 		changeDefaultIcons,
@@ -12,6 +12,7 @@
 		support
 	} from '$lib/map/setup';
 	import { areaError, areas, reportError, reports } from '$lib/store';
+	import type { Leaflet, Theme } from '$lib/types';
 	import { detectTheme, errToast } from '$lib/utils';
 	// @ts-expect-error
 	import rewind from '@mapbox/geojson-rewind';
@@ -19,13 +20,18 @@
 	import type { Map } from 'leaflet';
 	import { onDestroy, onMount } from 'svelte';
 
+	let mapLoading = 0;
+
+	let leaflet: Leaflet;
+	let theme: Theme;
+
 	let mapElement: HTMLDivElement;
 	let map: Map;
 	let mapLoaded = false;
+	let communitiesLoaded = false;
 
 	// allow to view map centered on a community
 	const communityQuery = $page.url.searchParams.get('community');
-	const communitySelected = $areas.find((area) => area.id === communityQuery);
 
 	// allow to view map with only certain language communities
 	const language = $page.url.searchParams.get('language');
@@ -33,125 +39,44 @@
 	// allow to view map with only certain org communities
 	const organization = $page.url.searchParams.get('organization');
 
-	// filter communities
-	let communitiesFiltered = $areas.filter(
-		(area) =>
-			area.tags.type === 'community' &&
-			area.tags.geo_json &&
-			area.tags.name &&
-			area.tags['icon:square'] &&
-			area.tags.continent &&
-			Object.keys(area.tags).find((key) => key.includes('contact')) &&
-			$reports.find((report) => report.area_id === area.id) &&
-			(language ? area.tags.language === language : true) &&
-			(organization ? area.tags.organization === organization : true)
-	);
-
-	// sort communities by largest to smallest
-	let communities = communitiesFiltered.map((community) => {
-		rewind(community.tags.geo_json, true);
-		return { ...community, area: geoArea(community.tags.geo_json) };
-	});
-
-	communities.sort((a, b) => b.area - a.area);
-
 	// alert for area errors
 	$: $areaError && errToast($areaError);
 
 	// alert for report errors
 	$: $reportError && errToast($reportError);
 
-	onMount(async () => {
-		if (browser) {
-			const theme = detectTheme();
-
-			//import packages
-			const leaflet = await import('leaflet');
-			// @ts-expect-error
-			const DomEvent = await import('leaflet/src/dom/DomEvent');
-			/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
-			const leafletLocateControl = await import('leaflet.locatecontrol');
-			/* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
-
-			// add map and tiles
-			map = leaflet.map(mapElement);
-
-			// use url hash if present
-			if (location.hash) {
-				try {
-					const coords = location.hash.split('/');
-					map.setView([Number(coords[1]), Number(coords[2])], Number(coords[0].slice(1)));
-				} catch (error) {
-					map.setView([0, 0], 3);
-					errToast(
-						'Could not set map view to provided coordinates, please try again or contact BTC Map.'
-					);
-					console.log(error);
-				}
-			}
-
-			// set view to community if in url params
-			else if (communityQuery && communitySelected) {
-				try {
-					map.fitBounds(leaflet.geoJSON(communitySelected.tags.geo_json).getBounds());
-				} catch (error) {
-					map.setView([0, 0], 3);
-					errToast(
-						'Could not set map view to provided coordinates, please try again or contact BTC Map.'
-					);
-					console.log(error);
-				}
-			}
-
-			// set view to all communities as default
-			else if (communities.length) {
-				try {
-					map.fitBounds(
-						// @ts-expect-error
-						communities.map((community) => leaflet.geoJSON(community.tags.geo_json).getBounds())
-					);
-				} catch (error) {
-					map.setView([0, 0], 3);
-					errToast(
-						'Could not set map view to provided coordinates, please try again or contact BTC Map.'
-					);
-					console.log(error);
-				}
-			} else {
-				map.setView([0, 0], 3);
-			}
-
-			// add tiles and basemaps
-			const baseMaps = layers(leaflet, map);
-
-			map.on('moveend', () => {
-				if (!communityQuery) {
-					const zoom = map.getZoom();
-					const mapCenter = map.getCenter();
-					location.hash = zoom + '/' + mapCenter.lat.toFixed(5) + '/' + mapCenter.lng.toFixed(5);
-				}
-			});
-
-			// add support attribution
-			support();
-
-			// add OSM attribution
-			attribution(leaflet, map);
-
-			// add scale
-			scaleBars(leaflet, map);
-
-			// add locate button to map
-			geolocate(leaflet, map);
-
-			// add home and marker buttons to map
-			homeMarkerButtons(leaflet, map, DomEvent);
-
-			// add communities to map
-			communities.forEach((community) => {
-				const popupContainer = leaflet.DomUtil.create('div');
-
-				popupContainer.innerHTML = `
+	const initializeCommunities = () => {
+		if (communitiesLoaded) return;
+
+		const communitySelected = $areas.find((area) => area.id === communityQuery);
+
+		// filter communities
+		const communitiesFiltered = $areas.filter(
+			(area) =>
+				area.tags.type === 'community' &&
+				area.tags.geo_json &&
+				area.tags.name &&
+				area.tags['icon:square'] &&
+				area.tags.continent &&
+				Object.keys(area.tags).find((key) => key.includes('contact')) &&
+				$reports.find((report) => report.area_id === area.id) &&
+				(language ? area.tags.language === language : true) &&
+				(organization ? area.tags.organization === organization : true)
+		);
+
+		// sort communities by largest to smallest
+		const communities = communitiesFiltered
+			.map((community) => {
+				rewind(community.tags.geo_json, true);
+				return { ...community, area: geoArea(community.tags.geo_json) };
+			})
+			.sort((a, b) => b.area - a.area);
+
+		// add communities to map
+		communities.forEach((community) => {
+			const popupContainer = leaflet.DomUtil.create('div');
+
+			popupContainer.innerHTML = `
 				<div class='text-center space-y-2'>
 					<img loading='lazy' src=${
 						community.tags['icon:square']
@@ -205,54 +130,155 @@
 						: ''
 				}`;
 
-				const socials = popupContainer.querySelector('#socials');
-				if (socials) {
-					new Socials({
-						target: socials,
-						props: {
-							website: community.tags['contact:website'],
-							email: community.tags['contact:email'],
-							nostr: community.tags['contact:nostr'],
-							twitter: community.tags['contact:twitter'],
-							secondTwitter: community.tags['contact:second_twitter'],
-							meetup: community.tags['contact:meetup'],
-							eventbrite: community.tags['contact:eventbrite'],
-							telegram: community.tags['contact:telegram'],
-							discord: community.tags['contact:discord'],
-							youtube: community.tags['contact:youtube'],
-							github: community.tags['contact:github'],
-							reddit: community.tags['contact:reddit'],
-							instagram: community.tags['contact:instagram'],
-							whatsapp: community.tags['contact:whatsapp'],
-							facebook: community.tags['contact:facebook'],
-							linkedin: community.tags['contact:linkedin'],
-							rss: community.tags['contact:rss'],
-							signal: community.tags['contact:signal']
-						}
-					});
-				}
+			const socials = popupContainer.querySelector('#socials');
+			if (socials) {
+				new Socials({
+					target: socials,
+					props: {
+						website: community.tags['contact:website'],
+						email: community.tags['contact:email'],
+						nostr: community.tags['contact:nostr'],
+						twitter: community.tags['contact:twitter'],
+						secondTwitter: community.tags['contact:second_twitter'],
+						meetup: community.tags['contact:meetup'],
+						eventbrite: community.tags['contact:eventbrite'],
+						telegram: community.tags['contact:telegram'],
+						discord: community.tags['contact:discord'],
+						youtube: community.tags['contact:youtube'],
+						github: community.tags['contact:github'],
+						reddit: community.tags['contact:reddit'],
+						instagram: community.tags['contact:instagram'],
+						whatsapp: community.tags['contact:whatsapp'],
+						facebook: community.tags['contact:facebook'],
+						linkedin: community.tags['contact:linkedin'],
+						rss: community.tags['contact:rss'],
+						signal: community.tags['contact:signal']
+					}
+				});
+			}
 
-				try {
-					let communityLayer = leaflet
-						.geoJSON(community.tags.geo_json, {
-							style: { color: '#000000', fillColor: '#F7931A', fillOpacity: 0.5 }
-						})
-						.bindPopup(popupContainer, { minWidth: 300 });
+			try {
+				let communityLayer = leaflet
+					.geoJSON(community.tags.geo_json, {
+						style: { color: '#000000', fillColor: '#F7931A', fillOpacity: 0.5 }
+					})
+					.bindPopup(popupContainer, { minWidth: 300 });
+
+				communityLayer.on('click', () => communityLayer.bringToBack());
+
+				communityLayer.addTo(map);
+			} catch (error) {
+				console.log(error, community);
+			}
+		});
+
+		// set view to community if in url params
+		if (communityQuery && communitySelected) {
+			try {
+				map.fitBounds(leaflet.geoJSON(communitySelected.tags.geo_json).getBounds());
+			} catch (error) {
+				map.setView([0, 0], 3);
+				errToast(
+					'Could not set map view to provided coordinates, please try again or contact BTC Map.'
+				);
+				console.log(error);
+			}
+		}
+
+		// set view to all communities as default
+		else if (communities.length) {
+			try {
+				map.fitBounds(
+					// @ts-expect-error
+					communities.map((community) => leaflet.geoJSON(community.tags.geo_json).getBounds())
+				);
+			} catch (error) {
+				map.setView([0, 0], 3);
+				errToast(
+					'Could not set map view to provided coordinates, please try again or contact BTC Map.'
+				);
+				console.log(error);
+			}
+		}
+
+		mapLoading = 100;
+
+		communitiesLoaded = true;
+	};
 
-					communityLayer.on('click', () => communityLayer.bringToBack());
+	$: $areas &&
+		$areas.length &&
+		$reports &&
+		$reports.length &&
+		mapLoaded &&
+		!communitiesLoaded &&
+		initializeCommunities();
+
+	onMount(async () => {
+		if (browser) {
+			theme = detectTheme();
 
-					communityLayer.addTo(map);
+			//import packages
+			leaflet = await import('leaflet');
+			// @ts-expect-error
+			const DomEvent = await import('leaflet/src/dom/DomEvent');
+			/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
+			const leafletLocateControl = await import('leaflet.locatecontrol');
+			/* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
+
+			// add map and tiles
+			map = leaflet.map(mapElement);
+
+			// use url hash if present
+			if (location.hash) {
+				try {
+					const coords = location.hash.split('/');
+					map.setView([Number(coords[1]), Number(coords[2])], Number(coords[0].slice(1)));
 				} catch (error) {
-					console.log(error, community);
+					map.setView([0, 0], 3);
+					errToast(
+						'Could not set map view to provided coordinates, please try again or contact BTC Map.'
+					);
+					console.log(error);
+				}
+			} else {
+				map.setView([0, 0], 3);
+			}
+
+			// add tiles and basemaps
+			const baseMaps = layers(leaflet, map);
+
+			map.on('moveend', () => {
+				if (!communityQuery) {
+					const zoom = map.getZoom();
+					const mapCenter = map.getCenter();
+					location.hash = zoom + '/' + mapCenter.lat.toFixed(5) + '/' + mapCenter.lng.toFixed(5);
 				}
 			});
 
+			// add support attribution
+			support();
+
+			// add OSM attribution
+			attribution(leaflet, map);
+
+			// add scale
+			scaleBars(leaflet, map);
+
+			// add locate button to map
+			geolocate(leaflet, map);
+
+			// add home and marker buttons to map
+			homeMarkerButtons(leaflet, map, DomEvent);
+
 			leaflet.control.layers(baseMaps).addTo(map);
 
 			// change default icons
 			changeDefaultIcons(true, leaflet, mapElement, DomEvent);
 
 			// final map setup
+			mapLoading = 40;
+
 			mapLoaded = true;
 		}
 	});
@@ -265,14 +291,17 @@
 	});
 </script>
 
+<svelte:head>
+	<title>BTC Map - Community Map</title>
+	<meta property="og:image" content="https://btcmap.org/images/og/communities.png" />
+	<meta property="twitter:title" content="BTC Map - Community Map" />
+	<meta property="twitter:image" content="https://btcmap.org/images/og/communities.png" />
+</svelte:head>
+
 <main>
-	{#if !mapLoaded}
-		<MapLoading
-			type="main"
-			message="Rendering community map..."
-			style="absolute top-0 left-0 z-[10000]"
-		/>
-	{/if}
+	<h1 class="hidden">Community Map</h1>
+
+	<MapLoadingMain progress={mapLoading} />
 
 	<div bind:this={mapElement} class="absolute h-[100%] w-full !bg-teal dark:!bg-dark" />
 </main>
diff --git a/src/routes/community/[area]/+page.svelte b/src/routes/community/[area]/+page.svelte
index ca15f02d..c66c6119 100644
--- a/src/routes/community/[area]/+page.svelte
+++ b/src/routes/community/[area]/+page.svelte
@@ -8,7 +8,7 @@
 		Header,
 		InfoTooltip,
 		LatestTagger,
-		MapLoading,
+		MapLoadingEmbed,
 		OpenTicket,
 		OrgBadge,
 		ProfileStat,
@@ -865,8 +865,7 @@
 						class="z-10 h-[300px] rounded-b-3xl border border-statBorder !bg-teal text-left dark:!bg-[#202f33] md:h-[600px]"
 					/>
 					{#if !mapLoaded}
-						<MapLoading
-							type="embed"
+						<MapLoadingEmbed
 							style="h-[300px] md:h-[600px] border border-statBorder rounded-b-3xl"
 						/>
 					{/if}
diff --git a/src/routes/map/+layout.svelte b/src/routes/map/+layout.svelte
deleted file mode 100644
index 3dfb3d80..00000000
--- a/src/routes/map/+layout.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { MapLoading } from '$lib/comp';
-	import { elementError, elements, mapLoading } from '$lib/store';
-	import { errToast } from '$lib/utils';
-
-	// alert for map errors
-	$: $elementError && errToast($elementError);
-</script>
-
-<svelte:head>
-	<title>BTC Map</title>
-	<meta property="og:image" content="https://btcmap.org/images/og/map.png" />
-	<meta property="twitter:title" content="BTC Map" />
-	<meta property="twitter:image" content="https://btcmap.org/images/og/map.png" />
-</svelte:head>
-
-<h1 class="hidden">Map</h1>
-
-{#if $elements && $elements.length}
-	<slot />
-{:else}
-	<MapLoading type="main" message={$mapLoading} />
-{/if}
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index ed33819d..3240b781 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
-	import { Boost, Icon, MapLoading, ShowTags } from '$lib/comp';
+	import { Boost, Icon, MapLoadingMain, ShowTags } from '$lib/comp';
 	import {
 		attribution,
 		calcVerifiedDate,
@@ -20,17 +20,23 @@
 		verifiedArr
 	} from '$lib/map/setup';
 	import { elementError, elements, elementsSyncCount, mapUpdates } from '$lib/store';
-	import type { MapGroups, OSMTags, SearchElement, SearchResult } from '$lib/types';
+	import type { Leaflet, MapGroups, OSMTags, SearchElement, SearchResult } from '$lib/types';
 	import { detectTheme, errToast } from '$lib/utils';
 	import axios from 'axios';
-	import type { LatLng, LatLngBounds, Map } from 'leaflet';
+	import type { Control, LatLng, LatLngBounds, Map } from 'leaflet';
 	import localforage from 'localforage';
 	import { onDestroy, onMount, tick } from 'svelte';
 	import OutClick from 'svelte-outclick';
 
+	let mapLoading = 0;
+
+	let leaflet: Leaflet;
+	let controlLayers: Control.Layers;
+
 	let mapElement: HTMLDivElement;
 	let map: Map;
 	let mapLoaded = false;
+	let elementsLoaded = false;
 
 	let mapCenter: LatLng;
 	let elementsCopy: SearchElement[] = [];
@@ -135,12 +141,135 @@
 	// alert for map errors
 	$: $elementError && errToast($elementError);
 
+	const initializeElements = () => {
+		if (elementsLoaded) return;
+
+		// get date from 1 year ago to add verified check if survey is current
+		let verifiedDate = calcVerifiedDate();
+
+		// create marker cluster group and layers
+		/* eslint-disable no-undef */
+		// @ts-expect-error
+		let markers = L.markerClusterGroup({ maxClusterRadius: 60 });
+		/* eslint-enable no-undef */
+		let upToDateLayer = leaflet.featureGroup.subGroup(markers);
+		let outdatedLayer = leaflet.featureGroup.subGroup(markers);
+		let legacyLayer = leaflet.featureGroup.subGroup(markers);
+		let categories: MapGroups = {};
+
+		// add location information
+		$elements.forEach((element) => {
+			if (element['deleted_at']) {
+				return;
+			}
+
+			let category = element.tags.category;
+			let icon = element.tags['icon:android'];
+			let payment = element.tags['payment:uri']
+				? { type: 'uri', url: element.tags['payment:uri'] }
+				: element.tags['payment:pouch']
+				  ? { type: 'pouch', username: element.tags['payment:pouch'] }
+				  : element.tags['payment:coinos']
+				    ? { type: 'coinos', username: element.tags['payment:coinos'] }
+				    : undefined;
+			let boosted =
+				element.tags['boost:expires'] && Date.parse(element.tags['boost:expires']) > Date.now()
+					? element.tags['boost:expires']
+					: undefined;
+
+			const elementOSM = element['osm_json'];
+
+			if (
+				(onchain ? elementOSM.tags && elementOSM.tags['payment:onchain'] === 'yes' : true) &&
+				(lightning ? elementOSM.tags && elementOSM.tags['payment:lightning'] === 'yes' : true) &&
+				(nfc
+					? elementOSM.tags && elementOSM.tags['payment:lightning_contactless'] === 'yes'
+					: true) &&
+				(legacy ? elementOSM.tags && elementOSM.tags['payment:bitcoin'] === 'yes' : true) &&
+				(boosts ? boosted : true)
+			) {
+				const lat = latCalc(elementOSM);
+				const long = longCalc(elementOSM);
+
+				let divIcon = generateIcon(leaflet, icon, boosted ? true : false);
+
+				let marker = generateMarker(
+					lat,
+					long,
+					divIcon,
+					elementOSM,
+					payment,
+					leaflet,
+					verifiedDate,
+					true,
+					boosted
+				);
+
+				let verified = verifiedArr(elementOSM);
+
+				if (verified.length && Date.parse(verified[0]) > verifiedDate) {
+					upToDateLayer.addLayer(marker);
+				} else {
+					outdatedLayer.addLayer(marker);
+				}
+
+				if (elementOSM.tags && elementOSM.tags['payment:bitcoin']) {
+					legacyLayer.addLayer(marker);
+				}
+
+				if (!categories[category]) {
+					categories[category] = leaflet.featureGroup.subGroup(markers);
+				}
+
+				categories[category].addLayer(marker);
+
+				elementsCopy.push({
+					...elementOSM,
+					latLng: leaflet.latLng(lat, long),
+					marker,
+					icon,
+					boosted
+				});
+			}
+		});
+
+		map.addLayer(markers);
+
+		let overlayMaps: MapGroups = {
+			'Up-To-Date': upToDateLayer,
+			Outdated: outdatedLayer,
+			Legacy: legacyLayer
+		};
+
+		Object.keys(categories)
+			.sort()
+			.map((category) => {
+				overlayMaps[
+					category === 'atm'
+						? category.toUpperCase()
+						: category.charAt(0).toUpperCase() + category.slice(1)
+				] = categories[category];
+				map.addLayer(upToDateLayer);
+				map.addLayer(outdatedLayer);
+				map.addLayer(legacyLayer);
+				map.addLayer(categories[category]);
+			});
+
+		Object.entries(overlayMaps).forEach((layer) => controlLayers.addOverlay(layer[1], layer[0]));
+
+		mapLoading = 100;
+
+		elementsLoaded = true;
+	};
+
+	$: $elements && $elements.length && mapLoaded && !elementsLoaded && initializeElements();
+
 	onMount(async () => {
 		if (browser) {
 			const theme = detectTheme();
 
 			//import packages
-			const leaflet = await import('leaflet');
+			leaflet = await import('leaflet');
 			// @ts-expect-error
 			const DomEvent = await import('leaflet/src/dom/DomEvent');
 			/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
@@ -411,118 +540,7 @@ Thanks for using BTC Map!`);
 			// add data refresh button to map
 			dataRefresh(leaflet, map, DomEvent);
 
-			// get date from 1 year ago to add verified check if survey is current
-			let verifiedDate = calcVerifiedDate();
-
-			// create marker cluster group and layers
-			/* eslint-disable no-undef */
-			// @ts-expect-error
-			let markers = L.markerClusterGroup({ maxClusterRadius: 60 });
-			/* eslint-enable no-undef */
-			let upToDateLayer = leaflet.featureGroup.subGroup(markers);
-			let outdatedLayer = leaflet.featureGroup.subGroup(markers);
-			let legacyLayer = leaflet.featureGroup.subGroup(markers);
-			let categories: MapGroups = {};
-
-			// add location information
-			$elements.forEach((element) => {
-				if (element['deleted_at']) {
-					return;
-				}
-
-				let category = element.tags.category;
-				let icon = element.tags['icon:android'];
-				let payment = element.tags['payment:uri']
-					? { type: 'uri', url: element.tags['payment:uri'] }
-					: element.tags['payment:pouch']
-					  ? { type: 'pouch', username: element.tags['payment:pouch'] }
-					  : element.tags['payment:coinos']
-					    ? { type: 'coinos', username: element.tags['payment:coinos'] }
-					    : undefined;
-				let boosted =
-					element.tags['boost:expires'] && Date.parse(element.tags['boost:expires']) > Date.now()
-						? element.tags['boost:expires']
-						: undefined;
-
-				const elementOSM = element['osm_json'];
-
-				if (
-					(onchain ? elementOSM.tags && elementOSM.tags['payment:onchain'] === 'yes' : true) &&
-					(lightning ? elementOSM.tags && elementOSM.tags['payment:lightning'] === 'yes' : true) &&
-					(nfc
-						? elementOSM.tags && elementOSM.tags['payment:lightning_contactless'] === 'yes'
-						: true) &&
-					(legacy ? elementOSM.tags && elementOSM.tags['payment:bitcoin'] === 'yes' : true) &&
-					(boosts ? boosted : true)
-				) {
-					const lat = latCalc(elementOSM);
-					const long = longCalc(elementOSM);
-
-					let divIcon = generateIcon(leaflet, icon, boosted ? true : false);
-
-					let marker = generateMarker(
-						lat,
-						long,
-						divIcon,
-						elementOSM,
-						payment,
-						leaflet,
-						verifiedDate,
-						true,
-						boosted
-					);
-
-					let verified = verifiedArr(elementOSM);
-
-					if (verified.length && Date.parse(verified[0]) > verifiedDate) {
-						upToDateLayer.addLayer(marker);
-					} else {
-						outdatedLayer.addLayer(marker);
-					}
-
-					if (elementOSM.tags && elementOSM.tags['payment:bitcoin']) {
-						legacyLayer.addLayer(marker);
-					}
-
-					if (!categories[category]) {
-						categories[category] = leaflet.featureGroup.subGroup(markers);
-					}
-
-					categories[category].addLayer(marker);
-
-					elementsCopy.push({
-						...elementOSM,
-						latLng: leaflet.latLng(lat, long),
-						marker,
-						icon,
-						boosted
-					});
-				}
-			});
-
-			map.addLayer(markers);
-
-			let overlayMaps: MapGroups = {
-				'Up-To-Date': upToDateLayer,
-				Outdated: outdatedLayer,
-				Legacy: legacyLayer
-			};
-
-			Object.keys(categories)
-				.sort()
-				.map((category) => {
-					overlayMaps[
-						category === 'atm'
-							? category.toUpperCase()
-							: category.charAt(0).toUpperCase() + category.slice(1)
-					] = categories[category];
-					map.addLayer(upToDateLayer);
-					map.addLayer(outdatedLayer);
-					map.addLayer(legacyLayer);
-					map.addLayer(categories[category]);
-				});
-
-			leaflet.control.layers(baseMaps, overlayMaps).addTo(map);
+			controlLayers = leaflet.control.layers(baseMaps).addTo(map);
 
 			// treasure hunt event
 			if (Date.now() < new Date('April 30, 2023 00:00:00').getTime()) {
@@ -677,6 +695,8 @@ Thanks for using BTC Map!`);
 				mapCenter = map.getCenter();
 			});
 
+			mapLoading = 40;
+
 			mapLoaded = true;
 		}
 	});
@@ -689,10 +709,17 @@ Thanks for using BTC Map!`);
 	});
 </script>
 
+<svelte:head>
+	<title>BTC Map</title>
+	<meta property="og:image" content="https://btcmap.org/images/og/map.png" />
+	<meta property="twitter:title" content="BTC Map" />
+	<meta property="twitter:image" content="https://btcmap.org/images/og/map.png" />
+</svelte:head>
+
 <main>
-	{#if !mapLoaded}
-		<MapLoading type="main" message="Rendering map..." style="absolute top-0 left-0 z-[10000]" />
-	{/if}
+	<h1 class="hidden">Map</h1>
+
+	<MapLoadingMain progress={mapLoading} />
 
 	<div
 		id="search-div"
@@ -713,6 +740,7 @@ Thanks for using BTC Map!`);
 					}
 				}}
 				bind:value={search}
+				disabled={!elementsLoaded}
 			/>
 
 			<button
@@ -806,7 +834,10 @@ Thanks for using BTC Map!`);
 		{/if}
 	</div>
 
-	<Boost />
+	{#if browser}
+		<Boost />
+	{/if}
+
 	<ShowTags />
 
 	<div bind:this={mapElement} class="absolute h-[100%] w-full !bg-teal dark:!bg-dark" />
diff --git a/src/routes/merchant/[id]/+page.svelte b/src/routes/merchant/[id]/+page.svelte
index 455d75ea..6717f19e 100644
--- a/src/routes/merchant/[id]/+page.svelte
+++ b/src/routes/merchant/[id]/+page.svelte
@@ -8,7 +8,7 @@
 		Footer,
 		Header,
 		Icon,
-		MapLoading,
+		MapLoadingEmbed,
 		MerchantButton,
 		MerchantEvent,
 		MerchantLink,
@@ -627,8 +627,7 @@
 						class="z-10 h-[300px] rounded-b-3xl border border-statBorder !bg-teal text-left dark:!bg-[#202f33] md:h-[600px]"
 					/>
 					{#if !mapLoaded}
-						<MapLoading
-							type="embed"
+						<MapLoadingEmbed
 							style="h-[300px] md:h-[600px] border border-statBorder rounded-b-3xl"
 						/>
 					{/if}
diff --git a/src/routes/tagger/[id]/+page.svelte b/src/routes/tagger/[id]/+page.svelte
index a8bfa53d..4d32ffbf 100644
--- a/src/routes/tagger/[id]/+page.svelte
+++ b/src/routes/tagger/[id]/+page.svelte
@@ -5,7 +5,7 @@
 	import {
 		Footer,
 		Header,
-		MapLoading,
+		MapLoadingEmbed,
 		ProfileActivity,
 		ProfileActivitySkeleton,
 		ProfileStat,
@@ -630,8 +630,7 @@
 						class="z-10 h-[300px] rounded-b-3xl border border-statBorder !bg-teal text-left dark:!bg-[#202f33] md:h-[600px]"
 					/>
 					{#if !mapLoaded}
-						<MapLoading
-							type="embed"
+						<MapLoadingEmbed
 							style="h-[300px] md:h-[600px] border border-statBorder rounded-b-3xl"
 						/>
 					{/if}
diff --git a/src/routes/verify-location/+page.svelte b/src/routes/verify-location/+page.svelte
index 03e8fe6a..6fb7d55f 100644
--- a/src/routes/verify-location/+page.svelte
+++ b/src/routes/verify-location/+page.svelte
@@ -7,7 +7,7 @@
 		Header,
 		HeaderPlaceholder,
 		InfoTooltip,
-		MapLoading,
+		MapLoadingEmbed,
 		PrimaryButton
 	} from '$lib/comp';
 	import {
@@ -341,8 +341,7 @@
 									class="z-10 h-[300px] !cursor-crosshair rounded-2xl border-2 border-input !bg-teal dark:!bg-dark dark:text-map md:h-[450px]"
 								/>
 								{#if !mapLoaded}
-									<MapLoading
-										type="embed"
+									<MapLoadingEmbed
 										style="h-[300px] md:h-[450px] border-2 border-input rounded-2xl"
 									/>
 								{/if}