tyler
b845d69aba
Public Pages: - Landing page with server/client split and metadata export - Cart page with ARIA accessibility and loading states - Checkout page with form accessibility and proper design system - Contact page with SEO metadata and improved accessibility - Pricing page with enhanced FAQ accessibility - Login page with Suspense boundaries and secure patterns Brand Storefronts: - Premium loading skeletons for Tuxedo and Indian River Direct - Branded error boundaries with animations - Loading.tsx for about, contact, FAQ, stops pages - Error.tsx for all storefront subpages Admin Dashboard: - AdminSidebar: ARIA labels, keyboard navigation, mobile improvements - DashboardClient: Stats cards, quick actions, usage progress - Admin layout: Toast provider integration Admin Orders/Products/Stops: - Toast notification system with auto-dismiss - Skeleton loading components (Table, Card, Stats, Form) - Bulk actions (mark picked up, publish stops) - Form validation with error styling Admin Communications: - AnalyticsDashboard: sparklines, stat cards, engagement badges - CampaignComposerPage: step wizard, template selection, email preview - SegmentBuilderPage: empty state, active segment handling - ContactListPanel: loading skeletons, professional empty states - MessageLogPanel: stats cards, engagement indicators - HarvestReachNav: branded tab navigation - All pages: metadata exports and loading.tsx Admin Settings: - SquareSyncSettingsClient: design system colors, save/cancel UX - ShippingSettingsForm: validation, dirty state tracking - Integrations page: proper layout with AI and communications sections - Billing: improved plan comparison, add-on cards - PaymentSettings: toggle components, validation Wholesale Portal: - Portal: loading skeletons, quantity stepper, search/filter - Login/Register: FormField validation, success states - Success/Cancel pages: animated checkmarks - Employee portal: skeletons, empty states, mobile responsive Water Log: - FieldClient: loading step, progress indicator, spinner - AdminClient: loading skeletons - Admin pages: loading.tsx files New Components: - Toast.tsx/ToastContainer.tsx: comprehensive notification system - Skeleton.tsx: shimmer loading components - AdminToggle.tsx: consistent toggle/switch - CommunicationsLoading.tsx: loading skeleton for comms - ToastExport.ts: exports CSS Improvements: - Shimmer animation keyframes - Toast slide-in animation Accessibility: - ARIA labels throughout - Keyboard navigation - Focus states - Semantic HTML - Screen reader support
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Loading...",
|
|
description: "Loading...",
|
|
robots: {
|
|
index: false,
|
|
follow: false,
|
|
},
|
|
};
|
|
|
|
export default function Loading() {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center px-6 py-12 bg-gradient-to-br from-stone-50 to-amber-50/30">
|
|
{/* Background orbs */}
|
|
<div
|
|
className="fixed w-96 h-96 rounded-full pointer-events-none animate-pulse"
|
|
style={{
|
|
background: 'radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%)',
|
|
top: '10%',
|
|
left: '10%',
|
|
filter: 'blur(60px)'
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Loading card */}
|
|
<div className="w-full max-w-sm relative">
|
|
<div className="bg-white/70 backdrop-blur-2xl rounded-[2rem] shadow-lg p-8">
|
|
{/* Logo skeleton */}
|
|
<div className="flex justify-center mb-10">
|
|
<div className="h-20 w-20 rounded-3xl bg-slate-200 animate-pulse" />
|
|
</div>
|
|
|
|
{/* Text skeleton */}
|
|
<div className="space-y-3">
|
|
<div className="h-8 w-32 rounded bg-slate-200 mx-auto animate-pulse" />
|
|
<div className="h-4 w-24 rounded bg-slate-100 mx-auto animate-pulse" />
|
|
</div>
|
|
|
|
{/* Form skeleton */}
|
|
<div className="mt-8 space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="h-4 w-16 rounded bg-slate-100 animate-pulse" />
|
|
<div className="h-12 rounded-xl bg-slate-100 animate-pulse" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="h-4 w-20 rounded bg-slate-100 animate-pulse" />
|
|
<div className="h-12 rounded-xl bg-slate-100 animate-pulse" />
|
|
</div>
|
|
<div className="h-12 rounded-xl bg-slate-200 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span role="status" className="sr-only">Loading login page...</span>
|
|
</div>
|
|
);
|
|
} |