Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: wrap use with suspense

Browse Source 
skill issue
This commit is contained in:
Ephraim Atta-Duncan
2024-03-29 11:14:44 +00:00
parent cc60437dcd
commit 81ab220f1e
2 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
);
}

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

@ -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 (