fix: wrap use with suspense

skill issue

apps/marketing/src/components/(marketing)/status-widget-container.tsx

@@ -1,25 +1,32 @@
 // https://github.com/documenso/documenso/pull/1044/files#r1538258462
-import { Suspense, use } from 'react';
+import { Suspense } from 'react';
-
-import { getStatus } from '@openstatus/react';
 
 import { StatusWidget } from './status-widget';
 
 export function StatusWidgetContainer() {
-  const res = use(getStatus('documenso-status'));
-
   return (
     <Suspense fallback={<StatusWidgetFallback />}>
-      <StatusWidget status={res.status} />
+      <StatusWidget />
     </Suspense>
   );
 }
 
 function StatusWidgetFallback() {
   return (
-    <div className="border-border flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm">
+    <a
-      <span className="bg-muted h-5 w-20 animate-pulse rounded-md" />
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
-      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
+      href="https://status.documenso.com"
-    </div>
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">Operational</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
+        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500" />
+      </span>
+    </a>
   );
 }

apps/marketing/src/components/(marketing)/status-widget.tsx

@@ -1,4 +1,6 @@
-import type { Status } from '@openstatus/react';
+import { use } from 'react';
+
+import { type Status, getStatus } from '@openstatus/react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -42,7 +44,8 @@ const getStatusLevel = (level: Status) => {
   }[level];
 };
 
-export function StatusWidget({ status }: { status: Status }) {
+export function StatusWidget() {
+  const { status } = use(getStatus('documenso-status'));
   const level = getStatusLevel(status);
 
   return (