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:
Thomas Camlong committed 2026-05-22 11:37:51 +02:00
1 parent f53527e2e7
commit 10cedbd906
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