85 lines
3.8 KiB
JavaScript
85 lines
3.8 KiB
JavaScript
import { useLayoutEffect, useState } from 'react';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { LAYOUT_CONSTANTS, calculateOptimalMaxWidth, calculateResponsiveWidth, calculateResponsiveScale } from '@/modules/editor/utils/layout-constants';
|
|
|
|
// Hook for responsive dimensions (same as Editor)
|
|
const useResponsiveDimensions = () => {
|
|
const [dimensions, setDimensions] = useState(() => ({
|
|
maxWidth: calculateOptimalMaxWidth(),
|
|
responsiveWidth: calculateResponsiveWidth(),
|
|
}));
|
|
|
|
useLayoutEffect(() => {
|
|
const newMaxWidth = calculateOptimalMaxWidth();
|
|
const newResponsiveWidth = calculateResponsiveWidth();
|
|
setDimensions({
|
|
maxWidth: newMaxWidth,
|
|
responsiveWidth: newResponsiveWidth,
|
|
});
|
|
}, []);
|
|
|
|
return dimensions;
|
|
};
|
|
|
|
// Hook for responsive canvas scale (same as EditorCanvas)
|
|
const useResponsiveCanvas = (maxWidth = 350) => {
|
|
const [scale, setScale] = useState(() => calculateResponsiveScale(maxWidth));
|
|
|
|
useLayoutEffect(() => {
|
|
setScale(calculateResponsiveScale(maxWidth));
|
|
}, [maxWidth]);
|
|
|
|
return scale;
|
|
};
|
|
|
|
const EditorSkeleton = () => {
|
|
const { maxWidth, responsiveWidth } = useResponsiveDimensions();
|
|
const scale = useResponsiveCanvas(maxWidth);
|
|
const displayWidth = LAYOUT_CONSTANTS.CANVAS_WIDTH * scale;
|
|
const displayHeight = LAYOUT_CONSTANTS.CANVAS_HEIGHT * scale;
|
|
|
|
return (
|
|
<div className="relative mx-auto flex min-h-[88vh] flex-col space-y-2" style={{ width: `${responsiveWidth}px` }}>
|
|
{/* Header Skeleton - EditorHeader currently returns empty <></> */}
|
|
<div className="mx-auto" style={{ width: `${responsiveWidth}px` }}>
|
|
{/* Header is empty in actual component, so we skip it */}
|
|
</div>
|
|
|
|
{/* Canvas Skeleton - matching EditorCanvas structure */}
|
|
<div className="flex w-full justify-center">
|
|
<div
|
|
style={{
|
|
width: `${displayWidth}px`,
|
|
height: `${displayHeight}px`,
|
|
}}
|
|
>
|
|
<Skeleton
|
|
className="origin-top-left rounded-3xl border bg-white shadow-sm dark:bg-black bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer"
|
|
style={{
|
|
width: `${LAYOUT_CONSTANTS.CANVAS_WIDTH}px`,
|
|
height: `${LAYOUT_CONSTANTS.CANVAS_HEIGHT}px`,
|
|
transform: `scale(${scale})`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Controls Skeleton - matching EditorControls structure */}
|
|
<div className="mx-auto flex items-center justify-center gap-2" style={{ width: `${responsiveWidth}px` }}>
|
|
{/* Play/Pause button */}
|
|
<Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
|
|
|
|
{/* Edit button */}
|
|
<Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
|
|
|
|
{/* Refresh button */}
|
|
<Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
|
|
|
|
{/* Download button */}
|
|
<Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorSkeleton; |