Phase 2

Base app architecture:

    Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.

src/components/feedback/loading-state.tsx

@@ -0,0 +1,17 @@
+import { Loader2 } from "lucide-react";
+
+/**
+ * Full-region loading indicator for cases a skeleton doesn't fit (route
+ * transitions, full-page Suspense fallbacks). Prefer `ListSkeleton`/
+ * `CardSkeleton` (skeleton.tsx) for known list/card shapes — a skeleton
+ * that mirrors the eventual layout reduces perceived load time more than
+ * a spinner does.
+ */
+export function LoadingState({ label = "Loading…" }: { label?: string }) {
+  return (
+    <div role="status" className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-muted">
+      <Loader2 className="h-6 w-6 animate-spin" aria-hidden="true" />
+      <span className="text-sm">{label}</span>
+    </div>
+  );
+}