From 05af7f19f57675ca7093a967bf3c7836826c8d34 Mon Sep 17 00:00:00 2001
From: taDuc <tranduc.wsp@gmail.com>
Date: Sun, 14 Jun 2026 01:10:07 +0700
Subject: [PATCH] refactor: improve map preview transition and layout stability
 with opacity animations and adjusted loading delay

---
 src/app/layout.tsx                            |   2 +-
 src/uhm/components/preview/MapPlaceholder.tsx |   4 +-
 .../preview/PublicPreviewClientPage.tsx       | 400 +++++++++---------
 .../preview/PublicPreviewWrapper.tsx          |   8 -
 4 files changed, 208 insertions(+), 206 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a81bbda..a230ef3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
   title: 'Ultimate History Map',
   description: 'Bản đồ tương tác lịch sử thế giới qua các thời kỳ',
 };
- 
+
 const inter = Inter({
   subsets: ['latin', 'vietnamese'],
   weight: ['400', '500', '600', '700'],
diff --git a/src/uhm/components/preview/MapPlaceholder.tsx b/src/uhm/components/preview/MapPlaceholder.tsx
index ae83ebf..04a5cf6 100644
--- a/src/uhm/components/preview/MapPlaceholder.tsx
+++ b/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>
diff --git a/src/uhm/components/preview/PublicPreviewClientPage.tsx b/src/uhm/components/preview/PublicPreviewClientPage.tsx
index d7c32f2..5882a2b 100644
--- a/src/uhm/components/preview/PublicPreviewClientPage.tsx
+++ b/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,102 +794,213 @@ export default function PublicPreviewClientPage({
 
     return (
         <>
-            {isBackgroundVisibilityReady && loadInteractiveMap && (
-                <PreviewMapShell
-                    mapHandleRef={mapHandleRef}
-                    renderDraft={filteredRenderDraft}
-                    labelContextDraft={filteredLabelContextDraft}
-                    labelTimelineYear={currentTimelineYear}
-                    selectedFeatureIds={selectedFeatureIds}
-                    onSelectFeatureIds={setSelectedFeatureIds}
-                    instantLoad={instantLoad}
-                    onToggleInstantLoad={toggleInstantLoad}
-                    isLayerPanelVisible={isLayerPanelVisible}
-                    onLayerPanelVisibleChange={setIsLayerPanelVisible}
-                    backgroundVisibility={backgroundVisibility}
-                    geometryVisibility={geometryVisibility}
-                    onToggleBackground={handleToggleBackgroundLayer}
-                    onToggleGeometry={(typeKey) => {
-                        setGeometryVisibility((prev) => ({
-                            ...prev,
-                            [typeKey]: prev[typeKey] === false,
-                        }));
-                    }}
-                    timelineYear={currentTimelineYear}
-                    onTimelineYearChange={handleTimelineYearChange}
-                    timelineTimeRange={timeRange}
-                    onTimelineTimeRangeChange={handleTimeRangeChange}
-                    isTimelineLoading={isTimelineLoading || isRelationsLoading}
-                    timelineStatusText={relationsStatus || timelineStatus}
-                    timelineStyle={computedTimelineStyle}
-                    onFeatureClick={handleMapFeatureClick}
-                    hoverPopupEnabled
-                    getHoverPopupContent={getHoverPopupContent}
-                    activeEntity={displayedActiveEntity}
-                    activeWiki={displayedActiveWiki}
-                    isWikiLoading={isActiveWikiLoading}
-                    wikiError={activeWikiError}
-                    onCloseWikiSidebar={handleCloseWikiSidebar}
-                    onWikiLinkRequest={handlePanelWikiLinkRequest}
-                    onWikiLinkEntitySelectionRequest={handlePanelWikiLinkEntitySelectionRequest}
-                    sidebarWidth={sidebarWidth}
-                    onSidebarWidthChange={setSidebarWidth}
-                    maxSidebarDragWidth={maxDragWidth}
-                    sidebarHeight={sidebarHeight}
-                    onSidebarHeightChange={handleSidebarHeightChange}
-                    showViewportControls={false}
-                    onPlayPreviewReplay={activeReplay && replayMode === "idle" ? handlePlayPreviewReplay : undefined}
-                    timelineDisabled={replayMode !== "idle"}
-                    hasAnyBottomPanel={isWikiChooserOpen || isGeometryChooserOpen}
-                    overlay={
-                        replayMode !== "idle" ? (
-                            <ReplayPreviewOverlay
-                                isPreviewMode={true}
-                                isPlaying={replayPreview.isPlaying}
-                                dialog={replayPreview.dialog}
-                                toasts={replayPreview.toasts}
-                                sidebarOpen={isSidebarOpen}
-                                sidebarWidth={sidebarWidth}
-                                playbackSpeed={replayPreview.playbackSpeed}
-                                activeStepLabel={activeStepLabel}
-                                activeStepNumber={replayPreview.activeStepNumber}
-                                totalSteps={replayPreview.totalSteps}
-                                playButtonLabel={replayMode === "paused" ? "Tiếp tục" : "Phát lại"}
-                                onPlayPreview={handleResumePreviewReplay}
-                                onStopPreview={handleStopPreviewReplay}
-                                onResetPreview={handleResetPreviewReplay}
-                                onExitPreview={handleExitReplay}
+            <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}
+                        renderDraft={filteredRenderDraft}
+                        labelContextDraft={filteredLabelContextDraft}
+                        labelTimelineYear={currentTimelineYear}
+                        selectedFeatureIds={selectedFeatureIds}
+                        onSelectFeatureIds={setSelectedFeatureIds}
+                        instantLoad={instantLoad}
+                        onToggleInstantLoad={toggleInstantLoad}
+                        isLayerPanelVisible={isLayerPanelVisible}
+                        onLayerPanelVisibleChange={setIsLayerPanelVisible}
+                        backgroundVisibility={backgroundVisibility}
+                        geometryVisibility={geometryVisibility}
+                        onToggleBackground={handleToggleBackgroundLayer}
+                        onToggleGeometry={(typeKey) => {
+                            setGeometryVisibility((prev) => ({
+                                ...prev,
+                                [typeKey]: prev[typeKey] === false,
+                            }));
+                        }}
+                        timelineYear={currentTimelineYear}
+                        onTimelineYearChange={handleTimelineYearChange}
+                        timelineTimeRange={timeRange}
+                        onTimelineTimeRangeChange={handleTimeRangeChange}
+                        isTimelineLoading={isTimelineLoading || isRelationsLoading}
+                        timelineStatusText={relationsStatus || timelineStatus}
+                        timelineStyle={computedTimelineStyle}
+                        onFeatureClick={handleMapFeatureClick}
+                        hoverPopupEnabled
+                        getHoverPopupContent={getHoverPopupContent}
+                        activeEntity={displayedActiveEntity}
+                        activeWiki={displayedActiveWiki}
+                        isWikiLoading={isActiveWikiLoading}
+                        wikiError={activeWikiError}
+                        onCloseWikiSidebar={handleCloseWikiSidebar}
+                        onWikiLinkRequest={handlePanelWikiLinkRequest}
+                        onWikiLinkEntitySelectionRequest={handlePanelWikiLinkEntitySelectionRequest}
+                        sidebarWidth={sidebarWidth}
+                        onSidebarWidthChange={setSidebarWidth}
+                        maxSidebarDragWidth={maxDragWidth}
+                        sidebarHeight={sidebarHeight}
+                        onSidebarHeightChange={handleSidebarHeightChange}
+                        showViewportControls={false}
+                        onPlayPreviewReplay={activeReplay && replayMode === "idle" ? handlePlayPreviewReplay : undefined}
+                        timelineDisabled={replayMode !== "idle"}
+                        hasAnyBottomPanel={isWikiChooserOpen || isGeometryChooserOpen}
+                        overlay={
+                            replayMode !== "idle" ? (
+                                <ReplayPreviewOverlay
+                                    isPreviewMode={true}
+                                    isPlaying={replayPreview.isPlaying}
+                                    dialog={replayPreview.dialog}
+                                    toasts={replayPreview.toasts}
+                                    sidebarOpen={isSidebarOpen}
+                                    sidebarWidth={sidebarWidth}
+                                    playbackSpeed={replayPreview.playbackSpeed}
+                                    activeStepLabel={activeStepLabel}
+                                    activeStepNumber={replayPreview.activeStepNumber}
+                                    totalSteps={replayPreview.totalSteps}
+                                    playButtonLabel={replayMode === "paused" ? "Tiếp tục" : "Phát lại"}
+                                    onPlayPreview={handleResumePreviewReplay}
+                                    onStopPreview={handleStopPreviewReplay}
+                                    onResetPreview={handleResetPreviewReplay}
+                                    onExitPreview={handleExitReplay}
+                                />
+                            ) : null
+                        }
+                    >
+                        <div style={searchBarWrapperStyle}>
+                            <PresentPlaceSearch
+                                focusedPlace={focusedPresentPlace}
+                                onFocusPlace={handleFocusPresentPlace}
+                                onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
+                                onFocusWiki={handleFocusWiki}
+                                onClearFocus={clearPresentPlaceFocus}
+                                style={{
+                                    position: "relative",
+                                    top: 0,
+                                    left: 0,
+                                    transform: "none",
+                                    width: searchBarWidth,
+                                }}
                             />
-                        ) : null
-                    }
-                >
-                    <div style={searchBarWrapperStyle}>
-                        <PresentPlaceSearch
-                            focusedPlace={focusedPresentPlace}
-                            onFocusPlace={handleFocusPresentPlace}
-                            onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
-                            onFocusWiki={handleFocusWiki}
-                            onClearFocus={clearPresentPlaceFocus}
-                            style={{
-                                position: "relative",
-                                top: 0,
-                                left: 0,
-                                transform: "none",
-                                width: searchBarWidth,
+                            {isLargeScreen ? (
+                                <PublicMapZoomPanel
+                                    mapHandleRef={mapHandleRef}
+                                    onPlayPreviewReplay={activeReplay && replayMode === "idle" ? handlePlayPreviewReplay : undefined}
+                                    onResumePreviewReplay={replayMode === "paused" ? handleResumePreviewReplay : undefined}
+                                    onStopPreviewReplay={replayMode === "playing" ? handleStopPreviewReplay : undefined}
+                                />
+                            ) : null}
+                        </div>
+                        <FirstVisitGuideModal />
+                    </PreviewMapShell>
+                )}
+
+                {linkEntityPopup ? (
+                    <div
+                        ref={linkEntityPopupRef}
+                        className="fixed z-[60] w-[240px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-950"
+                        style={{ top: linkEntityPopup.top, left: linkEntityPopup.left }}
+                    >
+                        <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
+                            <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                Related Entities
+                            </div>
+                            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                                /wiki/{linkEntityPopup.slug}
+                            </div>
+                        </div>
+                        <div className="max-h-[220px] overflow-y-auto p-2">
+                            {linkEntityPopup.entities.length ? (
+                                <div className="grid gap-1">
+                                    {linkEntityPopup.entities.map((entity) => (
+                                        <button
+                                            key={entity.id}
+                                            type="button"
+                                            onClick={() => {
+                                                setWikiSelectionPanelAnchor(null);
+                                                setRightPanelMode("wiki");
+                                                selectEntity(entity.id, { preferredWikiSlug: linkEntityPopup.slug });
+                                                setLinkEntityPopup(null);
+                                            }}
+                                            className="rounded-lg px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.04] dark:hover:text-white"
+                                        >
+                                            {entity.name}
+                                        </button>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                                    Không có entity liên quan.
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                ) : null}
+
+                {isGeometryChooserOpen && geometrySelectionPanel ? (
+                    <aside
+                        className={isLargeScreen ? "fixed bottom-4 right-4 top-4 left-auto z-20 max-w-[calc(100vw-2rem)]" : "fixed bottom-0 left-0 right-0 top-auto z-20"}
+                        style={isLargeScreen ? {
+                            width: `min(${sidebarWidth}px, calc(100vw - 2rem))`,
+                        } : {
+                            height: `${sidebarHeight || 400}px`,
+                            maxHeight: "90vh",
+                            width: "100%",
+                            maxWidth: "100%",
+                        }}
+                    >
+                        <GeometrySelectionPanel
+                            wikiSlug={geometrySelectionPanel.wikiSlug}
+                            rows={geometrySelectionPanel.rows}
+                            isLoading={geometrySelectionPanel.isLoading}
+                            error={geometrySelectionPanel.error}
+                            onClose={() => {
+                                setGeometrySelectionPanel(null);
+                                setRightPanelMode(null);
+                            }}
+                            onSelectEntity={handleGeometrySelectionEntitySelect}
+                        />
+                    </aside>
+                ) : null}
+
+                {isWikiChooserOpen ? (
+                    <aside
+                        className={isLargeScreen ? "fixed bottom-4 right-4 top-4 left-auto z-20 max-w-[calc(100vw-2rem)]" : "fixed bottom-0 left-0 right-0 top-auto z-20"}
+                        style={isLargeScreen ? {
+                            width: `min(${sidebarWidth}px, calc(100vw - 2rem))`,
+                        } : {
+                            height: `${sidebarHeight || 400}px`,
+                            maxHeight: "90vh",
+                            width: "100%",
+                            maxWidth: "100%",
+                        }}
+                    >
+                        <WikiSelectionPanel
+                            rows={wikiSelectionPanelRows}
+                            onClose={() => {
+                                setWikiSelectionPanelAnchor(null);
+                                setRightPanelMode(null);
+                            }}
+                            onSelectRow={(entityId, wikiId) => {
+                                const wiki = wikiSelectionPanelRows.find((row) => row.entity.id === entityId && row.wiki.id === wikiId)?.wiki || null;
+                                const sourceFeatureId = wikiSelectionPanelAnchor?.featureId ?? null;
+                                setWikiSelectionPanelAnchor(null);
+                                setRightPanelMode("wiki");
+                                selectEntity(entityId, {
+                                    sourceFeatureId,
+                                    preferredWikiSlug: wiki?.slug,
+                                    selectGeometry: false,
+                                });
                             }}
                         />
-                        {isLargeScreen ? (
-                            <PublicMapZoomPanel
-                                mapHandleRef={mapHandleRef}
-                                onPlayPreviewReplay={activeReplay && replayMode === "idle" ? handlePlayPreviewReplay : undefined}
-                                onResumePreviewReplay={replayMode === "paused" ? handleResumePreviewReplay : undefined}
-                                onStopPreviewReplay={replayMode === "playing" ? handleStopPreviewReplay : undefined}
-                            />
-                        ) : null}
-                    </div>
-                    <FirstVisitGuideModal />
-                </PreviewMapShell>
-            )}
+                    </aside>
+                ) : null}
+            </div>
 
             {/* Smooth transition loading overlay */}
             <div
@@ -905,107 +1016,6 @@ export default function PublicPreviewClientPage({
             >
                 <MapPlaceholder onEnter={onEnter} />
             </div>
-
-            {linkEntityPopup ? (
-                <div
-                    ref={linkEntityPopupRef}
-                    className="fixed z-[60] w-[240px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-950"
-                    style={{ top: linkEntityPopup.top, left: linkEntityPopup.left }}
-                >
-                    <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
-                        <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                            Related Entities
-                        </div>
-                        <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                            /wiki/{linkEntityPopup.slug}
-                        </div>
-                    </div>
-                    <div className="max-h-[220px] overflow-y-auto p-2">
-                        {linkEntityPopup.entities.length ? (
-                            <div className="grid gap-1">
-                                {linkEntityPopup.entities.map((entity) => (
-                                    <button
-                                        key={entity.id}
-                                        type="button"
-                                        onClick={() => {
-                                            setWikiSelectionPanelAnchor(null);
-                                            setRightPanelMode("wiki");
-                                            selectEntity(entity.id, { preferredWikiSlug: linkEntityPopup.slug });
-                                            setLinkEntityPopup(null);
-                                        }}
-                                        className="rounded-lg px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.04] dark:hover:text-white"
-                                    >
-                                        {entity.name}
-                                    </button>
-                                ))}
-                            </div>
-                        ) : (
-                            <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
-                                Không có entity liên quan.
-                            </div>
-                        )}
-                    </div>
-                </div>
-            ) : null}
-
-            {isGeometryChooserOpen && geometrySelectionPanel ? (
-                <aside
-                    className={isLargeScreen ? "fixed bottom-4 right-4 top-4 left-auto z-20 max-w-[calc(100vw-2rem)]" : "fixed bottom-0 left-0 right-0 top-auto z-20"}
-                    style={isLargeScreen ? {
-                        width: `min(${sidebarWidth}px, calc(100vw - 2rem))`,
-                    } : {
-                        height: `${sidebarHeight || 400}px`,
-                        maxHeight: "90vh",
-                        width: "100%",
-                        maxWidth: "100%",
-                    }}
-                >
-                    <GeometrySelectionPanel
-                        wikiSlug={geometrySelectionPanel.wikiSlug}
-                        rows={geometrySelectionPanel.rows}
-                        isLoading={geometrySelectionPanel.isLoading}
-                        error={geometrySelectionPanel.error}
-                        onClose={() => {
-                            setGeometrySelectionPanel(null);
-                            setRightPanelMode(null);
-                        }}
-                        onSelectEntity={handleGeometrySelectionEntitySelect}
-                    />
-                </aside>
-            ) : null}
-
-            {isWikiChooserOpen ? (
-                <aside
-                    className={isLargeScreen ? "fixed bottom-4 right-4 top-4 left-auto z-20 max-w-[calc(100vw-2rem)]" : "fixed bottom-0 left-0 right-0 top-auto z-20"}
-                    style={isLargeScreen ? {
-                        width: `min(${sidebarWidth}px, calc(100vw - 2rem))`,
-                    } : {
-                        height: `${sidebarHeight || 400}px`,
-                        maxHeight: "90vh",
-                        width: "100%",
-                        maxWidth: "100%",
-                    }}
-                >
-                    <WikiSelectionPanel
-                        rows={wikiSelectionPanelRows}
-                        onClose={() => {
-                            setWikiSelectionPanelAnchor(null);
-                            setRightPanelMode(null);
-                        }}
-                        onSelectRow={(entityId, wikiId) => {
-                            const wiki = wikiSelectionPanelRows.find((row) => row.entity.id === entityId && row.wiki.id === wikiId)?.wiki || null;
-                            const sourceFeatureId = wikiSelectionPanelAnchor?.featureId ?? null;
-                            setWikiSelectionPanelAnchor(null);
-                            setRightPanelMode("wiki");
-                            selectEntity(entityId, {
-                                sourceFeatureId,
-                                preferredWikiSlug: wiki?.slug,
-                                selectGeometry: false,
-                            });
-                        }}
-                    />
-                </aside>
-            ) : null}
         </>
     );
 }
diff --git a/src/uhm/components/preview/PublicPreviewWrapper.tsx b/src/uhm/components/preview/PublicPreviewWrapper.tsx
index 3eb6caa..40a505f 100644
--- a/src/uhm/components/preview/PublicPreviewWrapper.tsx
+++ b/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}