@@ -41,7 +43,9 @@ export default async function Navbar() {
) : null}
}>
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 6d798370ef..9091f93d3b 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -3,11 +3,11 @@
import { Dialog, Transition } from '@headlessui/react';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import { Menu } from 'lib/shopify/types';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
export default function MobileMenu({ menu }: { menu: Menu[] }) {
const pathname = usePathname();
@@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
@@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
-
+ }>
+
+
{menu.length ? (
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index 03d152ec97..551d781c2b 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -41,3 +41,17 @@ export default function Search() {
);
}
+
+export function SearchSkeleton() {
+ return (
+
+ );
+}
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
index 33a36c6da9..e5b102fbf5 100644
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@@ -1,4 +1,5 @@
import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
import FilterItemDropdown from './dropdown';
import { FilterItem } from './item';
@@ -20,15 +21,19 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
<>
{title ? (
-
+
{title}
) : null}
>
diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
index 925d2c2041..3fce8e8a92 100644
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
-import { SortFilterItem } from 'lib/constants';
+import type { SortFilterItem } from 'lib/constants';
import { createUrl } from 'lib/utils';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
index a81a6b02c2..10232ae3d2 100644
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
+import { Suspense } from 'react';
import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
@@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
/>