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

+2 -6
View File
@@ -1,7 +1,7 @@
import type { ComponentType } from "react";
import type { Loader } from "next/dynamic";
import dynamic from "next/dynamic";
import { Center, Loader as UiLoader } from "@mantine/core";
import { Skeleton } from "@mantine/core";
import { objectEntries } from "@homarr/common";
import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
@@ -107,11 +107,7 @@ export const loadWidgetDynamic = <TKind extends WidgetKind>(kind: TKind) => {
const newlyLoadedComponent = dynamic<WidgetComponentProps<TKind>>(
widgetImports[kind].componentLoader as Loader<WidgetComponentProps<TKind>>,
{
loading: () => (
<Center w="100%" h="100%">
<UiLoader />
</Center>
),
loading: () => <Skeleton w="100%" h="100%" radius="md" animate />,
},
);