From 81ab220f1eea36ea37295307d20ff4e50221e1db Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 29 Mar 2024 11:14:44 +0000
Subject: [PATCH] fix: wrap use with suspense

skill issue
---
 .../(marketing)/status-widget-container.tsx   | 27 ++++++++++++-------
 .../components/(marketing)/status-widget.tsx  |  7 +++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
index 19206024f..ffc83bff0 100644
--- a/apps/marketing/src/components/(marketing)/status-widget-container.tsx
+++ b/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 { getStatus } from '@openstatus/react';
+import { Suspense } from '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">
-      <span className="bg-muted h-5 w-20 animate-pulse rounded-md" />
-      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
-    </div>
+    <a
+      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"
+      href="https://status.documenso.com"
+      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>
   );
 }
diff --git a/apps/marketing/src/components/(marketing)/status-widget.tsx b/apps/marketing/src/components/(marketing)/status-widget.tsx
index b5cef32ab..d53a79f43 100644
--- a/apps/marketing/src/components/(marketing)/status-widget.tsx
+++ b/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 (