diff --git a/src/components/MapLoadingMain.svelte b/src/components/MapLoadingMain.svelte
index 88702d40..ee7b19fe 100644
--- a/src/components/MapLoadingMain.svelte
+++ b/src/components/MapLoadingMain.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
 	export let progress: number | undefined;
 
+	import { tick } from 'svelte';
 	import { fade } from 'svelte/transition';
 
-	import { tick } from 'svelte';
+	$: progress === 40 &&
+		setTimeout(() => {
+			if (progress !== undefined && progress !== 100) {
+				progress = 60;
+			}
+		}, 2000);
 
 	const hideProgressBar = async () => {
 		await tick();
@@ -16,7 +22,7 @@
 {#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"
+		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 drop-shadow-2xl dark:border-white dark:bg-dark"
 	>
 		<p class="text-center text-primary dark:text-white">Loading map...</p>