diff --git a/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx b/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx
index 599b88e6..493b03df 100644
--- a/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx
+++ b/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx
@@ -11,6 +11,7 @@ import { BsmImage } from "../shared/bsm-image.component"
 import BeatConflict from "../../../../assets/images/apngs/beat-conflict.png"
 import { BsmButton } from "../shared/bsm-button.component"
 import { useTranslation } from "renderer/hooks/use-translation.hook"
+import BeatWaitingImg from "../../../../assets/images/apngs/beat-waiting.png"
 
 type Props = {
     version: BSVersion,
@@ -26,7 +27,7 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
 
     const ref = useRef(null)
     const isVisible = useInView(ref, {once: true});
-    const [maps, setMaps] = useState<BsmLocalMap[]>([]);
+    const [maps, setMaps] = useState<BsmLocalMap[]>(null);
     const [subs] = useState<Subscription[]>([]);
     const [selectedMaps, setSelectedMaps] = useState([]);
     const t = useTranslation();
@@ -51,7 +52,7 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
         }
     
         return () => {
-            setMaps(() => []);
+            setMaps(() => null);
             subs.forEach(s => s.unsubscribe());
             mapsDownloader.removeOnMapDownloadedListene(loadMaps);
         }
@@ -248,11 +249,18 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
         <div ref={ref} className={className}>
             <ul className="p-3 w-full grow flex flex-wrap justify-center content-start gap-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
                 {maps?.length ? renderMaps() : (
-                    <div className="h-full flex flex-col items-center justify-center flex-wrap gap-1">
-                        <BsmImage className="h-32" image={BeatConflict}/>
-                        <span className="font-bold">{t("pages.version-viewer.maps.tabs.maps.empty-maps.text")}</span>
-                        <BsmButton className="font-bold rounded-md p-2" text="pages.version-viewer.maps.tabs.maps.empty-maps.button" typeColor="primary" withBar={false} onClick={e => {e.preventDefault(); mapsDownloader.openDownloadMapModal(version)}}/>
-                    </div>
+                    maps === null ? (
+                        <div className="h-full flex flex-col items-center justify-center flex-wrap gap-1">
+                            <img className="w-32 h-32 spin-loading" src={BeatWaitingImg} alt=" "/>
+                            <span className="font-bold">{t("modals.download-maps.loading-maps")}</span>
+                        </div>
+                    ) : (
+                        <div className="h-full flex flex-col items-center justify-center flex-wrap gap-1">
+                            <BsmImage className="h-32" image={BeatConflict}/>
+                            <span className="font-bold">{t("pages.version-viewer.maps.tabs.maps.empty-maps.text")}</span>
+                            <BsmButton className="font-bold rounded-md p-2" text="pages.version-viewer.maps.tabs.maps.empty-maps.button" typeColor="primary" withBar={false} onClick={e => {e.preventDefault(); mapsDownloader.openDownloadMapModal(version)}}/>
+                        </div>
+                    ) 
                 )}
             </ul>
         </div>