designslife/WebForm-mw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Report: extract Loading/Empty/Error states to components/report/

Browse Source
This commit is contained in:
Joel Brock
2026-06-05 14:43:19 -07:00
parent 5cc60467a9
commit d737950a3d
2 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ReportView.tsx
+1 -36
View File
@@ -24,6 +24,7 @@ import {
MEMBERS_ACTUAL_NAME,
MEMBERS_GOAL_NAME,
} from "./report/MembershipChart";
import { LoadingState, EmptyState, ErrorState } from "./report/ReportStates";
interface ReportViewProps {
config: FormConfig;
@@ -483,39 +484,3 @@ function MobileStem({ show, state }: { show: boolean; state: PathwayState }) {
);
}
function LoadingState() {
return (
<div className="rounded-lg border border-rule bg-paper px-6 py-12 text-center">
<div
aria-hidden
className="mx-auto mb-4 h-7 w-7 animate-spin rounded-full border-[1.5px] border-rule border-t-leaf-700"
/>
<p className="font-display text-base text-ink-soft italic">Loading your activity report…</p>
</div>
);
}
function EmptyState() {
return (
<div className="rounded-lg border border-dashed border-rule bg-paper-2/30 px-6 py-10 text-center">
<p className="font-display text-lg text-ink-soft">No entries on file yet.</p>
<p className="mt-2 text-sm text-ink-mute">
Your co-op&apos;s first survey will appear here once it&apos;s submitted.
</p>
</div>
);
}
function ErrorState({ message }: { message: string }) {
return (
<div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
<h2 className="font-display text-xl font-medium text-clay-700">
We couldn&apos;t open your report.
</h2>
<p className="mt-3 text-sm leading-relaxed text-ink-soft">{message}</p>
<p className="mt-4 text-sm text-ink-soft">
If this keeps happening, please contact your <a href="mailto:chris@fci.coop">Chris @ FCI</a>.
</p>
</div>
);
}
components/report/ReportStates.tsx
+38
View File
@@ -0,0 +1,38 @@
"use client";
export function LoadingState() {
return (
<div className="rounded-lg border border-rule bg-paper px-6 py-12 text-center">
<div
aria-hidden
className="mx-auto mb-4 h-7 w-7 animate-spin rounded-full border-[1.5px] border-rule border-t-leaf-700"
/>
<p className="font-display text-base text-ink-soft italic">Loading your activity report…</p>
</div>
);
}
export function EmptyState() {
return (
<div className="rounded-lg border border-dashed border-rule bg-paper-2/30 px-6 py-10 text-center">
<p className="font-display text-lg text-ink-soft">No entries on file yet.</p>
<p className="mt-2 text-sm text-ink-mute">
Your co-op&apos;s first survey will appear here once it&apos;s submitted.
</p>
</div>
);
}
export function ErrorState({ message }: { message: string }) {
return (
<div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
<h2 className="font-display text-xl font-medium text-clay-700">
We couldn&apos;t open your report.
</h2>
<p className="mt-3 text-sm leading-relaxed text-ink-soft">{message}</p>
<p className="mt-4 text-sm text-ink-soft">
If this keeps happening, please contact your <a href="mailto:chris@fci.coop">Chris @ FCI</a>.
</p>
</div>
);
}