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
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Loading Route Commerce...",
|
|
description: "Loading...",
|
|
robots: {
|
|
index: false,
|
|
follow: false,
|
|
},
|
|
};
|
|
|
|
export default function Loading() {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center relative overflow-hidden" style={{ backgroundColor: "#faf8f5" }}>
|
|
{/* Subtle loading animation */}
|
|
<div className="flex flex-col items-center gap-6">
|
|
<div
|
|
className="w-16 h-16 rounded-2xl flex items-center justify-center animate-pulse"
|
|
style={{
|
|
background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
|
|
boxShadow: "0 8px 32px rgba(26, 77, 46, 0.3)"
|
|
}}
|
|
aria-label="Loading"
|
|
role="status"
|
|
>
|
|
<svg className="w-8 h-8 text-white animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" />
|
|
</svg>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-lg font-semibold text-stone-700" style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
|
|
Loading
|
|
</p>
|
|
<p className="text-sm text-stone-500 mt-1">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative elements */}
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
|
<div
|
|
className="absolute -top-32 -right-32 w-96 h-96 rounded-full opacity-10"
|
|
style={{ background: "radial-gradient(circle at 30% 30%, #c97a3e20 0%, transparent 70%)", filter: "blur(40px)" }}
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="absolute -bottom-48 -left-48 w-[600px] h-[600px] rounded-full opacity-10"
|
|
style={{ background: "radial-gradient(circle at 70% 70%, #6b8f7130 0%, transparent 70%)", filter: "blur(60px)" }}
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |