@salla.sa/twilight-theme-engine 1.0.135 → 1.0.137

package/tailwind/components/layout/MasterLayout.tsx.txt

@@ -1,21 +1,22 @@
-import { lazy, Suspense } from 'react';
+import { Suspense } from 'react';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import type { LayoutProps } from '../../types';
 import { useTwilight } from '../../providers/twilight-context';
 import { useUser } from '../../hooks';
+import { lazyComponent } from '../../utils/lazy-component';
 
-const SallaLoginModal = lazy(() =>
+const SallaLoginModal = lazyComponent(() =>
   import('@salla.sa/twilight-components-react/login-modal').then((m) => ({
     default: m.SallaLoginModal,
   }))
 );
-const SallaScopes = lazy(() =>
+const SallaScopes = lazyComponent(() =>
   import('@salla.sa/twilight-components-react/scopes').then((m) => ({
     default: m.SallaScopes,
   }))
 );
-const SallaOfferModal = lazy(() =>
+const SallaOfferModal = lazyComponent(() =>
   import('@salla.sa/twilight-components-react/offer-modal').then((m) => ({
     default: m.SallaOfferModal,
   }))

package/tailwind/components/layout/lazy.ts.txt

@@ -1,25 +1,29 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../../utils/lazy-component';
 
 /**
  * Lazy-loaded layout components
  * Use these for code-splitting layout sections
  */
-export const LazyHeader = lazy(() => import('./Header').then((m) => ({ default: m.Header })));
+export const LazyHeader = lazyComponent(() =>
+  import('./Header').then((m) => ({ default: m.Header }))
+);
 
-export const LazyFooter = lazy(() => import('./Footer').then((m) => ({ default: m.Footer })));
+export const LazyFooter = lazyComponent(() =>
+  import('./Footer').then((m) => ({ default: m.Footer }))
+);
 
-export const LazyCopyright = lazy(() =>
+export const LazyCopyright = lazyComponent(() =>
   import('./Copyright').then((m) => ({ default: m.Copyright }))
 );
 
-export const LazyMasterLayout = lazy(() =>
+export const LazyMasterLayout = lazyComponent(() =>
   import('./MasterLayout').then((m) => ({ default: m.MasterLayout }))
 );
 
-export const LazyWidgetHead = lazy(() =>
+export const LazyWidgetHead = lazyComponent(() =>
   import('./WidgetHead').then((m) => ({ default: m.WidgetHead }))
 );
 
-export const LazyCustomerLayout = lazy(() =>
+export const LazyCustomerLayout = lazyComponent(() =>
   import('./CustomerLayout').then((m) => ({ default: m.CustomerLayout }))
 );

package/tailwind/components/live-editor/index.tsx.txt

@@ -1,8 +1,9 @@
-import { lazy, Suspense, useEffect, useState, type ReactElement } from 'react';
+import { Suspense, useEffect, useState, type ReactElement } from 'react';
 import { editorFrame, FRAME_LOADED_ACTION, postToEditor, type EditorFrame } from './frame';
+import { lazyComponent } from '../../utils/lazy-component';
 
 /** Off the shell chunk: only a store framed by the theme editor ever loads it. */
-const LazyLiveEditorBar = lazy(() =>
+const LazyLiveEditorBar = lazyComponent(() =>
   import('./LiveEditorBar').then((m) => ({ default: m.LiveEditorBar }))
 );
 

package/tailwind/components/modal/lazy.ts.txt

@@ -1,10 +1,10 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../../utils/lazy-component';
 
 /**
  * Lazy-loaded modal components
  * ImageModal is lazy-loaded since it's a standalone component.
  * Modal is kept eager because it uses compound component pattern.
  */
-export const LazyImageModal = lazy(() =>
+export const LazyImageModal = lazyComponent(() =>
   import('./ImageModal').then((m) => ({ default: m.ImageModal }))
 );

package/tailwind/components/navigation/lazy.ts.txt

@@ -1,11 +1,13 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../../utils/lazy-component';
 
 /**
  * Lazy-loaded navigation components
  * Use these for code-splitting navigation sections
  */
-export const LazyMainMenu = lazy(() => import('./MainMenu').then((m) => ({ default: m.MainMenu })));
+export const LazyMainMenu = lazyComponent(() =>
+  import('./MainMenu').then((m) => ({ default: m.MainMenu }))
+);
 
-export const LazyMobileMenu = lazy(() =>
+export const LazyMobileMenu = lazyComponent(() =>
   import('./MobileMenu').then((m) => ({ default: m.MobileMenu }))
 );

package/tailwind/components/product/lazy.ts.txt

@@ -1,9 +1,9 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../../utils/lazy-component';
 
-export const LazyProductDetails = lazy(() =>
+export const LazyProductDetails = lazyComponent(() =>
   import('./ProductDetails').then((m) => ({ default: m.ProductDetails }))
 );
 
-export const LazyAddToCartForm = lazy(() =>
+export const LazyAddToCartForm = lazyComponent(() =>
   import('./AddToCartForm').then((m) => ({ default: m.AddToCartForm }))
 );

package/tailwind/components/snippets/AppsSnippets.tsx.txt

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { apps, type AppSnippetRow } from '../../api/apps';
 import { installAppScope } from '../../utils/app-scope';
 import { applyThemeHookSlots } from '../../utils/theme-hook-slots';
+import { setSnippetPageTargets } from '../../utils/snippet-page-compat';
 import { getTwilightContext } from '../../twilight/context';
 
 /** How long to wait on the SDK / settings before injecting anyway. */
@@ -180,6 +181,9 @@ export function AppsSnippets() {
     [data]
   );
 
+  // Pages these snippets check once on load: navigating to or from them reloads the document.
+  useEffect(() => setSnippetPageTargets(owned), [owned]);
+
   // Every CDN snippet → a real `<script>` tag in the SSR body (rendered below).
   const ssrCdnScripts = useMemo<SsrCdnScript[]>(
     () =>

package/tailwind/components/store/lazy.ts.txt

@@ -1,13 +1,13 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../../utils/lazy-component';
 
 /** Lazy-loaded StoreClosedNotification component. */
-export const LazyStoreClosedNotification = lazy(() =>
+export const LazyStoreClosedNotification = lazyComponent(() =>
   import('./StoreClosedNotification').then((m) => ({
     default: m.StoreClosedNotification,
   }))
 );
 
 /** Lazy-loaded MaintenancePage: off the shell chunk, since almost no visit renders it. */
-export const LazyMaintenancePage = lazy(() =>
+export const LazyMaintenancePage = lazyComponent(() =>
   import('./MaintenancePage').then((m) => ({ default: m.MaintenancePage }))
 );

package/tailwind/components/tracking/lazy.ts.txt

@@ -1,11 +1,11 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../../utils/lazy-component';
 
 /** Lazy-loaded GoogleTagBody component. */
-export const LazyGoogleTagBody = lazy(() =>
+export const LazyGoogleTagBody = lazyComponent(() =>
   import('./GoogleTag').then((m) => ({ default: m.GoogleTagBody }))
 );
 
 /** Lazy-loaded SiftSnippet component. */
-export const LazySiftSnippet = lazy(() =>
+export const LazySiftSnippet = lazyComponent(() =>
   import('./SiftSnippet').then((m) => ({ default: m.SiftSnippet }))
 );

package/tailwind/routes/account/notifications/index.tsx.txt

@@ -1,12 +1,13 @@
 import type { HeadDescriptor } from '../../../utils/head';
 import { buildHreflangAlternates } from '../../../utils/baseHead';
-import { lazy } from 'react';
+
 import { notificationsLoader } from './loader';
 import type { NotificationsPageProps } from './types';
 import type { TwilightContext } from '../../../twilight/context';
 import { RouteId } from '../../../router/route-ids';
+import { lazyComponent } from '../../../utils/lazy-component';
 
-const LazyNotificationsPage = lazy(() =>
+const LazyNotificationsPage = lazyComponent(() =>
   import('./NotificationsPage').then((m) => ({ default: m.NotificationsPage }))
 );
 

package/tailwind/routes/account/orders/index.tsx.txt

@@ -1,6 +1,6 @@
 import type { HeadDescriptor } from '../../../utils/head';
 import { buildHreflangAlternates } from '../../../utils/baseHead';
-import { lazy } from 'react';
+
 import { ordersLoader, orderSingleLoader } from './loader';
 import type { OrdersPageProps, OrderSinglePageProps, OrdersSearchParams } from './types';
 import type { IdParams } from '../../types';
@@ -8,8 +8,10 @@ import type { TwilightContext } from '../../../twilight/context';
 import { RouteId } from '../../../router/route-ids';
 
 // Lazy-load components for code-splitting
-const LazyOrdersPage = lazy(() => import('./OrdersPage').then((m) => ({ default: m.OrdersPage })));
-const LazyOrderSinglePage = lazy(() =>
+const LazyOrdersPage = lazyComponent(() =>
+  import('./OrdersPage').then((m) => ({ default: m.OrdersPage }))
+);
+const LazyOrderSinglePage = lazyComponent(() =>
   import('./OrderSinglePage').then((m) => ({ default: m.OrderSinglePage }))
 );
 
@@ -22,6 +24,7 @@ export type {
   OrdersSearchParams,
   OrdersQuery,
 } from './types';
+import { lazyComponent } from '../../../utils/lazy-component';
 
 async function ordersLoaderWithExtend(
   ctx: { search?: OrdersSearchParams; locale?: string; with_items?: boolean | number },

package/tailwind/routes/account/profile/index.tsx.txt

@@ -1,12 +1,13 @@
 import type { HeadDescriptor } from '../../../utils/head';
 import { buildHreflangAlternates } from '../../../utils/baseHead';
-import { lazy } from 'react';
+
 import { profileLoader } from './loader';
 import type { ProfilePageProps } from './types';
 import type { TwilightContext } from '../../../twilight/context';
 import { RouteId } from '../../../router/route-ids';
+import { lazyComponent } from '../../../utils/lazy-component';
 
-const LazyProfilePage = lazy(() =>
+const LazyProfilePage = lazyComponent(() =>
   import('./ProfilePage').then((m) => ({ default: m.ProfilePage }))
 );
 

package/tailwind/routes/account/settings/index.tsx.txt

@@ -1,12 +1,13 @@
 import type { HeadDescriptor } from '../../../utils/head';
 import { buildHreflangAlternates } from '../../../utils/baseHead';
-import { lazy } from 'react';
+
 import { settingsLoader } from './loader';
 import type { SettingsPageProps } from './types';
 import type { TwilightContext } from '../../../twilight/context';
 import { RouteId } from '../../../router/route-ids';
+import { lazyComponent } from '../../../utils/lazy-component';
 
-const LazySettingsPage = lazy(() =>
+const LazySettingsPage = lazyComponent(() =>
   import('./SettingsPage').then((m) => ({ default: m.SettingsPage }))
 );
 

package/tailwind/routes/account/wallet/index.tsx.txt

@@ -1,13 +1,16 @@
 import type { HeadDescriptor } from '../../../utils/head';
 import { buildHreflangAlternates } from '../../../utils/baseHead';
-import { lazy } from 'react';
+
 import { walletLoader } from './loader';
 import type { WalletPageProps } from './types';
 import type { LoaderContext } from '../../types';
 import type { TwilightContext } from '../../../twilight/context';
 import { RouteId } from '../../../router/route-ids';
+import { lazyComponent } from '../../../utils/lazy-component';
 
-const LazyWalletPage = lazy(() => import('./WalletPage').then((m) => ({ default: m.WalletPage })));
+const LazyWalletPage = lazyComponent(() =>
+  import('./WalletPage').then((m) => ({ default: m.WalletPage }))
+);
 
 export const WalletPage = LazyWalletPage;
 export { walletLoader } from './loader';

package/tailwind/routes/account/wishlist/index.tsx.txt

@@ -1,13 +1,14 @@
 import type { HeadDescriptor } from '../../../utils/head';
 import { buildHreflangAlternates } from '../../../utils/baseHead';
-import { lazy } from 'react';
+
 import { wishlistLoader } from './loader';
 import type { WishlistPageProps } from './types';
 import type { LoaderContext } from '../../types';
 import type { TwilightContext } from '../../../twilight/context';
 import { RouteId } from '../../../router/route-ids';
+import { lazyComponent } from '../../../utils/lazy-component';
 
-const LazyWishlistPage = lazy(() =>
+const LazyWishlistPage = lazyComponent(() =>
   import('./WishlistPage').then((m) => ({ default: m.WishlistPage }))
 );
 

package/tailwind/routes/blog/index.tsx.txt

@@ -1,6 +1,6 @@
 import type { HeadDescriptor } from '../../utils/head';
 import { buildHreflangAlternates } from '../../utils/baseHead';
-import { lazy } from 'react';
+
 import {
   blogLoader,
   blogSingleLoader,
@@ -27,17 +27,19 @@ import type { IdParams, SlugIdParams } from '../types';
 import type { TwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
 
-const LazyBlogPage = lazy(() => import('./BlogPage').then((m) => ({ default: m.BlogPage })));
-const LazyBlogSinglePage = lazy(() =>
+const LazyBlogPage = lazyComponent(() =>
+  import('./BlogPage').then((m) => ({ default: m.BlogPage }))
+);
+const LazyBlogSinglePage = lazyComponent(() =>
   import('./BlogSinglePage').then((m) => ({ default: m.BlogSinglePage }))
 );
-const LazyBlogAuthorPage = lazy(() =>
+const LazyBlogAuthorPage = lazyComponent(() =>
   import('./BlogAuthorPage').then((m) => ({ default: m.BlogAuthorPage }))
 );
-const LazyBlogCategoryPage = lazy(() =>
+const LazyBlogCategoryPage = lazyComponent(() =>
   import('./BlogCategoryPage').then((m) => ({ default: m.BlogCategoryPage }))
 );
-const LazyBlogTagPage = lazy(() =>
+const LazyBlogTagPage = lazyComponent(() =>
   import('./BlogTagPage').then((m) => ({ default: m.BlogTagPage }))
 );
 
@@ -53,6 +55,7 @@ export {
   blogCategoryLoader,
   blogTagLoader,
 } from './loader';
+import { lazyComponent } from '../../utils/lazy-component';
 export type {
   BlogAuthorLoaderData,
   BlogCategoryLoaderData,

package/tailwind/routes/brands/index.tsx.txt

@@ -1,13 +1,16 @@
 import type { HeadDescriptor } from '../../utils/head';
 import { buildHreflangAlternates } from '../../utils/baseHead';
-import { lazy } from 'react';
+
 import { brandsLoader } from './loader';
 import type { BrandsPageProps } from './types';
 import type { TwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
+import { lazyComponent } from '../../utils/lazy-component';
 
 // Lazy-load components for code-splitting
-const LazyBrandsPage = lazy(() => import('./BrandsPage').then((m) => ({ default: m.BrandsPage })));
+const LazyBrandsPage = lazyComponent(() =>
+  import('./BrandsPage').then((m) => ({ default: m.BrandsPage }))
+);
 
 export const BrandsPage = LazyBrandsPage;
 export { brandsLoader };

package/tailwind/routes/lazy.ts.txt

@@ -1,105 +1,105 @@
-import { lazy } from 'react';
+import { lazyComponent } from '../utils/lazy-component';
 
 // Home
-export const LazyHomePage = lazy(() =>
+export const LazyHomePage = lazyComponent(() =>
   import('./home/HomePage').then((m) => ({ default: m.HomePage }))
 );
 
 // Cart
-export const LazyCartPage = lazy(() =>
+export const LazyCartPage = lazyComponent(() =>
   import('./cart/CartPage').then((m) => ({ default: m.CartPage }))
 );
 
 // Product
-export const LazyProductPage = lazy(() =>
+export const LazyProductPage = lazyComponent(() =>
   import('./product/ProductPage').then((m) => ({ default: m.ProductPage }))
 );
 
 // Product Listing (unified for all product list pages: category, search, tag, latest, most-sales, offers)
-export const LazyProductListingPage = lazy(() =>
+export const LazyProductListingPage = lazyComponent(() =>
   import('./product-listing/ProductListPage').then((m) => ({ default: m.ProductListPage }))
 );
 
 // Blog
-export const LazyBlogPage = lazy(() =>
+export const LazyBlogPage = lazyComponent(() =>
   import('./blog/BlogPage').then((m) => ({ default: m.BlogPage }))
 );
 
-export const LazyBlogSinglePage = lazy(() =>
+export const LazyBlogSinglePage = lazyComponent(() =>
   import('./blog/BlogSinglePage').then((m) => ({ default: m.BlogSinglePage }))
 );
 
-export const LazyBlogAuthorPage = lazy(() =>
+export const LazyBlogAuthorPage = lazyComponent(() =>
   import('./blog/BlogAuthorPage').then((m) => ({ default: m.BlogAuthorPage }))
 );
 
-export const LazyBlogCategoryPage = lazy(() =>
+export const LazyBlogCategoryPage = lazyComponent(() =>
   import('./blog/BlogCategoryPage').then((m) => ({ default: m.BlogCategoryPage }))
 );
 
-export const LazyBlogTagPage = lazy(() =>
+export const LazyBlogTagPage = lazyComponent(() =>
   import('./blog/BlogTagPage').then((m) => ({ default: m.BlogTagPage }))
 );
 
 // Brands
-export const LazyBrandsPage = lazy(() =>
+export const LazyBrandsPage = lazyComponent(() =>
   import('./brands/BrandsPage').then((m) => ({ default: m.BrandsPage }))
 );
 
 // BrandSingle uses ProductListing module via tanstack.adapter.ts - no lazy export needed
 
 // Customer
-export const LazyProfilePage = lazy(() =>
+export const LazyProfilePage = lazyComponent(() =>
   import('./account/profile/ProfilePage').then((m) => ({ default: m.ProfilePage }))
 );
 
-export const LazyWishlistPage = lazy(() =>
+export const LazyWishlistPage = lazyComponent(() =>
   import('./account/wishlist/WishlistPage').then((m) => ({ default: m.WishlistPage }))
 );
 
-export const LazyWalletPage = lazy(() =>
+export const LazyWalletPage = lazyComponent(() =>
   import('./account/wallet/WalletPage').then((m) => ({ default: m.WalletPage }))
 );
 
-export const LazyNotificationsPage = lazy(() =>
+export const LazyNotificationsPage = lazyComponent(() =>
   import('./account/notifications/NotificationsPage').then((m) => ({
     default: m.NotificationsPage,
   }))
 );
 
-export const LazySettingsPage = lazy(() =>
+export const LazySettingsPage = lazyComponent(() =>
   import('./account/settings/SettingsPage').then((m) => ({ default: m.SettingsPage }))
 );
 
-export const LazyOrdersPage = lazy(() =>
+export const LazyOrdersPage = lazyComponent(() =>
   import('./account/orders/OrdersPage').then((m) => ({ default: m.OrdersPage }))
 );
 
-export const LazyOrderSinglePage = lazy(() =>
+export const LazyOrderSinglePage = lazyComponent(() =>
   import('./account/orders/OrderSinglePage').then((m) => ({ default: m.OrderSinglePage }))
 );
 
 // Loyalty
-export const LazyLoyaltyPage = lazy(() =>
+export const LazyLoyaltyPage = lazyComponent(() =>
   import('./loyalty/LoyaltyPage').then((m) => ({ default: m.LoyaltyPage }))
 );
 
 // Page (static)
-export const LazyPageSingle = lazy(() =>
+export const LazyPageSingle = lazyComponent(() =>
   import('./page/PageSingle').then((m) => ({ default: m.PageSingle }))
 );
 
 // Testimonials
-export const LazyTestimonialsPage = lazy(() =>
+export const LazyTestimonialsPage = lazyComponent(() =>
   import('./testimonials/TestimonialsPage').then((m) => ({ default: m.TestimonialsPage }))
 );
 
 // Thank You
-export const LazyThankYouPage = lazy(() =>
+export const LazyThankYouPage = lazyComponent(() =>
   import('./thank-you/ThankYouPage').then((m) => ({ default: m.ThankYouPage }))
 );
 
 // Not Found
-export const LazyNotFoundPage = lazy(() =>
+export const LazyNotFoundPage = lazyComponent(() =>
   import('./not-found').then((m) => ({ default: m.NotFoundPage }))
 );

package/tailwind/routes/loyalty/index.tsx.txt

@@ -1,17 +1,17 @@
 import type { HeadDescriptor } from '../../utils/head';
 import { buildHreflangAlternates } from '../../utils/baseHead';
-import { lazy } from 'react';
+
 import { loyaltyLoader, loyaltyPointsLoader } from './loader';
 import type { LoyaltyPageProps, LoyaltyPointsPageProps } from './types';
 import type { TwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
 
 // Lazy-load component for code-splitting
-const LazyLoyaltyPage = lazy(() =>
+const LazyLoyaltyPage = lazyComponent(() =>
   import('./LoyaltyPage').then((m) => ({ default: m.LoyaltyPage }))
 );
 
-const LazyLoyaltyPointsPage = lazy(() =>
+const LazyLoyaltyPointsPage = lazyComponent(() =>
   import('./LoyaltyPointsPage').then((m) => ({ default: m.LoyaltyPointsPage }))
 );
 
@@ -25,6 +25,7 @@ export type {
   LoyaltyPrize,
   LoyaltyPrizeItem,
 } from './types';
+import { lazyComponent } from '../../utils/lazy-component';
 
 async function loader(
   ctx?: { locale?: string },

package/tailwind/routes/page/index.tsx.txt

@@ -1,14 +1,17 @@
 import type { HeadDescriptor } from '../../utils/head';
 import { buildHreflangAlternates } from '../../utils/baseHead';
-import { lazy } from 'react';
+
 import { pageSingleLoader } from './loader';
 import type { PageSingleProps } from './types';
 import type { IdParams } from '../types';
 import type { TwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
+import { lazyComponent } from '../../utils/lazy-component';
 
 // Lazy-load component for code-splitting
-const LazyPageSingle = lazy(() => import('./PageSingle').then((m) => ({ default: m.PageSingle })));
+const LazyPageSingle = lazyComponent(() =>
+  import('./PageSingle').then((m) => ({ default: m.PageSingle }))
+);
 
 export const PageSingleLazy = LazyPageSingle;
 export { pageSingleLoader } from './loader';

package/tailwind/routes/root/beforeLoad.ts.txt

@@ -39,6 +39,7 @@ import {
 import { persistLanguageCookie, readCookieHeader } from '../../utils/language-cookie';
 import { decideSharedHostLanguage } from '../../utils/shared-host-language';
 import { prefixStoreBase } from '../../utils/store-base';
+import { preloadServerComponents } from '../../utils/lazy-component';
 import {
   ownerCookieMatches,
   ownerLinkMatches,
@@ -342,6 +343,10 @@ export async function rootBeforeLoad(ctx: {
   // client. No-op on the server and while the SDK storage API is still hydrating.
   syncScopeCookie();
 
+  // On the server, the lazy components load beside the requests below, so none suspends in
+  // the render: a fresh isolate otherwise streamed every block after the shell.
+  const componentsLoaded = preloadServerComponents();
+
   // Kept until the rest have settled, as a missing answer always was, then thrown:
   // it says why the store did not load.
   let settingsFailure: unknown;
@@ -380,6 +385,7 @@ export async function rootBeforeLoad(ctx: {
     ]
   );
 
+  await componentsLoaded;
   if (!settingsResult) throw settingsFailureToThrow(settingsFailure);
 
   // Settings answered for another market name another theme version; the SDK only

package/tailwind/routes/testimonials/index.tsx.txt

@@ -1,17 +1,18 @@
 import type { HeadDescriptor } from '../../utils/head';
 import { buildHreflangAlternates } from '../../utils/baseHead';
-import { lazy } from 'react';
+
 import { reviewsLoader, testimonialsLoader } from './loader';
 import type { ReviewsPageProps, TestimonialsPageProps } from './types';
 import type { TwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
+import { lazyComponent } from '../../utils/lazy-component';
 
 // Lazy-load component for code-splitting
-const LazyTestimonialsPage = lazy(() =>
+const LazyTestimonialsPage = lazyComponent(() =>
   import('./TestimonialsPage').then((m) => ({ default: m.TestimonialsPage }))
 );
 
-const LazyReviewsPage = lazy(() =>
+const LazyReviewsPage = lazyComponent(() =>
   import('./ReviewsPage').then((m) => ({ default: m.ReviewsPage }))
 );
 

package/tailwind/routes/thank-you/index.tsx.txt

@@ -1,13 +1,14 @@
 import type { HeadDescriptor } from '../../utils/head';
 import { buildHreflangAlternates } from '../../utils/baseHead';
-import { lazy } from 'react';
+
 import { thankYouLoader } from './loader';
 import type { ThankYouPageProps, ThankYouLoaderParams } from './types';
 import type { TwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
+import { lazyComponent } from '../../utils/lazy-component';
 
 // Lazy-load component for code-splitting
-const LazyThankYouPage = lazy(() =>
+const LazyThankYouPage = lazyComponent(() =>
   import('./ThankYouPage').then((m) => ({ default: m.ThankYouPage }))
 );