All files / src/app/(site) layout.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client";
import { Suspense } from "react";
import dynamic from "next/dynamic";
import Header from "../../components/layout/Header";
import { Footer } from "@/components";

import { ModalProvider, CartModalProvider, PreviewSliderProvider } from "@/contexts";
import { ReduxProvider } from "@/redux/provider";
import { SessionProviderWrapper } from "@/app/providers";
import { CartInitializer } from "@/components/features/cart/CartInitializer";
import { CartMergeHandler } from "@/components/features/cart/CartMergeHandler";
import { WishlistInitializer } from "@/components/features/cart/WishlistInitializer";
import { ThemeProvider } from "@/contexts/ThemeContext";
import { LiveRegionProvider } from "@/components/ui/LiveRegion";
import { DemoModeBanner } from "@/components/features/demo";
import { AnalyticsProvider } from "@/components/providers/AnalyticsProvider";
import { RumProvider } from "@/components/providers/RumProvider";
import { SkipLinks } from "@/components/layout/SkipLinks";
import { ErrorBoundary } from "@/components/shared/ErrorBoundary";

import { ScrollToTop } from "@/components";

// Lazy load non-critical modal components
const QuickViewModal = dynamic(() => import("@/components/shared/QuickViewModal"), { ssr: false });
const CartSidebarModal = dynamic(() => import("@/components/features/cart/CartSidebarModal"), { ssr: false });
const PreviewSliderModal = dynamic(() => import("@/components/shared/PreviewSlider"), { ssr: false });
const ChatbotWidget = dynamic(() => import("@/components/features/support/ChatbotWidget"), { ssr: false });

export default function SiteLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {/* Skip Links for keyboard accessibility */}
      <SkipLinks />

      <ThemeProvider defaultTheme="light">
        <SessionProviderWrapper>
          <ReduxProvider>
            <Suspense fallback={null}>
              <AnalyticsProvider>
                <RumProvider>
                <LiveRegionProvider>
                  <CartInitializer />
                  <CartMergeHandler />
                  <WishlistInitializer />
                  <CartModalProvider>
                    <ModalProvider>
                      <PreviewSliderProvider>
                        <DemoModeBanner />
                        <Header />
                        <main id="main-content" tabIndex={-1}>
                          <ErrorBoundary context="SITE_CONTENT">
                            {children}
                          </ErrorBoundary>
                        </main>

                        <QuickViewModal />
                        <CartSidebarModal />
                        <PreviewSliderModal />
                        <ChatbotWidget />
                        {/* Footer inside Suspense to stream with main content and prevent CLS */}
                        <Footer />
                      </PreviewSliderProvider>
                    </ModalProvider>
                  </CartModalProvider>
                </LiveRegionProvider>
                </RumProvider>
              </AnalyticsProvider>
            </Suspense>
          </ReduxProvider>
        </SessionProviderWrapper>
      </ThemeProvider>
      <ScrollToTop />
    </>
  );
}