diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx index ffc83bff0..025c2df56 100644 --- a/apps/marketing/src/components/(marketing)/status-widget-container.tsx +++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx @@ -13,20 +13,9 @@ export function StatusWidgetContainer() { function StatusWidgetFallback() { return ( - -
-

Operational

-
- - - - - -
+
+ + +
); } diff --git a/apps/marketing/src/components/(marketing)/status-widget.tsx b/apps/marketing/src/components/(marketing)/status-widget.tsx index d53a79f43..1c94c0707 100644 --- a/apps/marketing/src/components/(marketing)/status-widget.tsx +++ b/apps/marketing/src/components/(marketing)/status-widget.tsx @@ -1,6 +1,7 @@ -import { use } from 'react'; +import { use, useMemo } from 'react'; -import { type Status, getStatus } from '@openstatus/react'; +import type { Status } from '@openstatus/react'; +import { getStatus } from '@openstatus/react'; import { cn } from '@documenso/ui/lib/utils'; @@ -45,7 +46,8 @@ const getStatusLevel = (level: Status) => { }; export function StatusWidget() { - const { status } = use(getStatus('documenso-status')); + const getStatusMemoized = useMemo(async () => getStatus('documenso-status'), []); + const { status } = use(getStatusMemoized); const level = getStatusLevel(status); return (