fix(widgets): eliminate layout shift with fallback dimensions
Provide estimated width/height to widgets before useElementSize measures the DOM, preventing responsive breakpoint shifts during hydration. Replace the Loader spinner with a Skeleton for widget loading states.
This commit is contained in:
2 files changed
+10
-7
No files matched your search
@@ -27,10 +27,17 @@ const getOverflowFromKind = (kind: SectionItem["kind"]) => {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const ASSUMED_VIEWPORT_WIDTH = 900;
|
||||
const DEFAULT_COLUMN_COUNT = 12;
|
||||
|
||||
export const BoardItemContent = ({ item }: BoardItemContentProps) => {
|
||||
const { ref, width, height } = useElementSize<HTMLDivElement>();
|
||||
const board = useRequiredBoard();
|
||||
|
||||
const estimatedCellSize = ASSUMED_VIEWPORT_WIDTH / DEFAULT_COLUMN_COUNT;
|
||||
const fallbackWidth = item.width * estimatedCellSize - 20;
|
||||
const fallbackHeight = item.height * estimatedCellSize - 20;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
@@ -53,7 +60,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
|
||||
}}
|
||||
p={0}
|
||||
>
|
||||
<InnerContent item={item} width={width} height={height} />
|
||||
<InnerContent item={item} width={width || fallbackWidth} height={height || fallbackHeight} />
|
||||
</Card>
|
||||
{item.advancedOptions.title?.trim() && (
|
||||
<Badge
|
||||
|
||||
Reference in new issue
Block a user