refactor: improve map preview transition and layout stability with opacity animations and adjusted loading delay

src/uhm/components/preview/MapPlaceholder.tsx

@@ -141,8 +141,8 @@ export default function MapPlaceholder({ onEnter }: MapPlaceholderProps) {
                 <style dangerouslySetInnerHTML={{
                     __html: `
                     @keyframes placeholder-pulse {
-                        0%, 100% { opacity: 0.35; transform: scale(0.98); }
-                        50% { opacity: 0.95; transform: scale(1); }
+                        0%, 100% { opacity: 0.35; }
+                        50% { opacity: 0.95; }
                     }
                 `}} />
             </div>

src/uhm/components/preview/PublicPreviewClientPage.tsx

@@ -130,7 +130,7 @@ export default function PublicPreviewClientPage({
         } else {
             const timer = setTimeout(() => {
                 setLoadInteractiveMap(true);
-            }, 2000);
+            }, 2500);
             return () => clearTimeout(timer);
         }
     }, [instantLoad]);
@@ -794,6 +794,15 @@ export default function PublicPreviewClientPage({
 
     return (
         <>
+            <div
+                style={{
+                    position: "absolute",
+                    inset: 0,
+                    visibility: userHasEntered ? "visible" : "hidden",
+                    opacity: userHasEntered ? 1 : 0,
+                    transition: "opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s",
+                }}
+            >
                 {isBackgroundVisibilityReady && loadInteractiveMap && (
                     <PreviewMapShell
                         mapHandleRef={mapHandleRef}
@@ -891,21 +900,6 @@ export default function PublicPreviewClientPage({
                     </PreviewMapShell>
                 )}
 
-            {/* Smooth transition loading overlay */}
-            <div
-                style={{
-                    position: "fixed",
-                    inset: 0,
-                    zIndex: 9999,
-                    pointerEvents: userHasEntered ? "none" : "auto",
-                    opacity: userHasEntered ? 0 : 1,
-                    visibility: userHasEntered ? "hidden" : "visible",
-                    transition: "opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s",
-                }}
-            >
-                <MapPlaceholder onEnter={onEnter} />
-            </div>
-
                 {linkEntityPopup ? (
                     <div
                         ref={linkEntityPopupRef}
@@ -1006,6 +1000,22 @@ export default function PublicPreviewClientPage({
                         />
                     </aside>
                 ) : null}
+            </div>
+
+            {/* Smooth transition loading overlay */}
+            <div
+                style={{
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 9999,
+                    pointerEvents: userHasEntered ? "none" : "auto",
+                    opacity: userHasEntered ? 0 : 1,
+                    visibility: userHasEntered ? "hidden" : "visible",
+                    transition: "opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s",
+                }}
+            >
+                <MapPlaceholder onEnter={onEnter} />
+            </div>
         </>
     );
 }

src/uhm/components/preview/PublicPreviewWrapper.tsx

@@ -88,14 +88,6 @@ export default function PublicPreviewWrapper() {
         };
     }, [handleEnter, mapEntered]);
 
-    if (!mapEntered && !instantLoad) {
-        return (
-            <MapPlaceholder
-                onEnter={handleEnter}
-            />
-        );
-    }
-
     return (
         <PublicPreviewClientPage
             userHasEntered={mapEntered}