"use client"; import dynamic from "next/dynamic"; import { useYmmStore } from "@/store/useYmmStore"; import { useEffect, useState } from "react"; const YMMBarSkeleton = () => (
{/* Title skeleton */}
{/* Dropdowns and buttons skeleton */}
{/* Dropdown skeletons */} {Array.from({ length: 3 }).map((_, i) => (
))} {/* Button skeletons */}
); const YMMBar = dynamic( () => import("./ymmBar").then((mod) => ({ default: mod.YMMBar })), { ssr: false, loading: () => , } ); export function YMMBarWrapper() { const isYmmActive = useYmmStore((state) => state.isYmmActive); const checkYmmStatus = useYmmStore((state) => state.checkYmmStatus); const [hasCheckedStatus, setHasCheckedStatus] = useState(false); const [isMounted, setIsMounted] = useState(false); // Ensure we're mounted to prevent hydration mismatch useEffect(() => { setIsMounted(true); }, []); useEffect(() => { if (isMounted && !hasCheckedStatus) { checkYmmStatus().then(() => setHasCheckedStatus(true)); } }, [checkYmmStatus, hasCheckedStatus, isMounted]); // Show skeleton while checking status (only after mount to prevent hydration issues) if (!isMounted || !hasCheckedStatus) { return ; } // Only render YMMBar if YMM is active if (!isYmmActive) { return null; } return ; }