perf: optimize ProductTable filter rendering to reduce INP on mobile

package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-portal": "^1.1.1",

src/components/Nav/MobileMenu/MobileMenuClient.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+
+import { PersistentPanel } from "@/components/ui/persistent-panel"
+import { Sheet, SheetTrigger } from "@/components/ui/sheet"
+
+import { cn } from "@/lib/utils/cn"
+
+import HamburgerButton from "./HamburgerButton"
+
+import { useCloseOnNavigate } from "@/hooks/useCloseOnNavigate"
+
+type MobileMenuClientProps = {
+  className?: string
+  side: "left" | "right"
+  children: React.ReactNode
+}
+
+const MobileMenuClient = ({
+  className,
+  side,
+  children,
+}: MobileMenuClientProps) => {
+  const [open, setOpen] = useCloseOnNavigate()
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <HamburgerButton
+          ref={triggerRef}
+          className={cn("-me-2", className)}
+          isMenuOpen={open}
+        />
+      </SheetTrigger>
+
+      <PersistentPanel
+        open={open}
+        side={side}
+        className="flex flex-col"
+        onOpenChange={setOpen}
+        triggerRef={triggerRef}
+      >
+        {children}
+      </PersistentPanel>
+    </Sheet>
+  )
+}
+
+export default MobileMenuClient

src/components/Nav/MobileMenu/index.tsx

@@ -12,13 +12,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible"
-import {
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-import { SheetCloseOnNavigate } from "@/components/ui/sheet-close-on-navigate"
+import { SheetFooter, SheetHeader } from "@/components/ui/sheet"
 
 import { cn } from "@/lib/utils/cn"
 import { isLangRightToLeft } from "@/lib/utils/translations"
@@ -28,8 +22,8 @@ import { MOBILE_LANGUAGE_BUTTON_NAME, SECTION_LABELS } from "@/lib/constants"
 
 import FooterButton from "./FooterButton"
 import FooterItemText from "./FooterItemText"
-import HamburgerButton from "./HamburgerButton"
 import MenuHeader from "./MenuHeader"
+import MobileMenuClient from "./MobileMenuClient"
 import ThemeToggleFooterButton from "./ThemeToggleFooterButton"
 
 import { getLanguagesDisplayInfo, getNavigation } from "@/lib/nav/links"
@@ -49,73 +43,59 @@ export default async function MobileMenu({
   const dir = isRtl ? "rtl" : "ltr"
 
   return (
-    <SheetCloseOnNavigate>
-      <SheetTrigger className={className} asChild>
-        <HamburgerButton
-          className={cn("-me-2", className)}
-          isMenuOpen={false}
-          {...props}
-        />
-      </SheetTrigger>
-      <SheetContent
-        side={side}
-        hideOverlay
-        className="flex flex-col"
-        aria-describedby=""
+    <MobileMenuClient className={className} side={side} {...props}>
+      <SheetHeader>
+        <MenuHeader />
+      </SheetHeader>
+
+      <TabsPrimitive.Root
+        dir={dir}
+        defaultValue="navigation"
+        className="flex min-h-0 flex-1 flex-col"
       >
-        <SheetHeader>
-          <MenuHeader />
-        </SheetHeader>
-
-        <TabsPrimitive.Root
-          dir={dir}
-          defaultValue="navigation"
-          className="flex min-h-0 flex-1 flex-col"
+        <TabsPrimitive.Content
+          value="navigation"
+          className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
         >
-          <TabsPrimitive.Content
-            value="navigation"
-            className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
-          >
-            <NavigationContent className="flex-1 overflow-y-auto" />
-          </TabsPrimitive.Content>
-          <TabsPrimitive.Content
-            value="languages"
-            className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
-          >
-            <LanguageContent className="flex min-h-0 flex-1 flex-col" />
-          </TabsPrimitive.Content>
-
-          <SheetFooter className="h-[108px] shrink-0 justify-center border-t border-body-light px-4 py-0">
-            <TabsPrimitive.List className="grid h-auto w-full grid-cols-3">
-              <div className="flex flex-col items-center gap-1 py-2">
-                <TabsPrimitive.Trigger value="languages" asChild>
-                  <FooterButton
-                    icon={Languages}
-                    name={MOBILE_LANGUAGE_BUTTON_NAME}
-                    data-testid="mobile-menu-language-picker"
-                  >
-                    <FooterItemText>{t("languages")}</FooterItemText>
-                  </FooterButton>
-                </TabsPrimitive.Trigger>
-              </div>
-              <div className="flex flex-col items-center gap-1 py-2">
-                <ThemeToggleFooterButton />
-              </div>
-              <div className="flex flex-col items-center gap-1 py-2">
-                <TabsPrimitive.Trigger value="navigation" asChild>
-                  <FooterButton
-                    icon={Menu}
-                    data-testid="mobile-menu-navigation-picker"
-                  >
-                    <FooterItemText>{t("menu")}</FooterItemText>
-                  </FooterButton>
-                </TabsPrimitive.Trigger>
-              </div>
-            </TabsPrimitive.List>
-          </SheetFooter>
-        </TabsPrimitive.Root>
-      </SheetContent>
-    </SheetCloseOnNavigate>
+          <NavigationContent className="flex-1 overflow-y-auto" />
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content
+          value="languages"
+          className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
+        >
+          <LanguageContent className="flex min-h-0 flex-1 flex-col" />
+        </TabsPrimitive.Content>
+
+        <SheetFooter className="h-[108px] shrink-0 justify-center border-t border-body-light px-4 py-0">
+          <TabsPrimitive.List className="grid h-auto w-full grid-cols-3">
+            <div className="flex flex-col items-center gap-1 py-2">
+              <TabsPrimitive.Trigger value="languages" asChild>
+                <FooterButton
+                  icon={Languages}
+                  name={MOBILE_LANGUAGE_BUTTON_NAME}
+                  data-testid="mobile-menu-language-picker"
+                >
+                  <FooterItemText>{t("languages")}</FooterItemText>
+                </FooterButton>
+              </TabsPrimitive.Trigger>
+            </div>
+            <div className="flex flex-col items-center gap-1 py-2">
+              <ThemeToggleFooterButton />
+            </div>
+            <div className="flex flex-col items-center gap-1 py-2">
+              <TabsPrimitive.Trigger value="navigation" asChild>
+                <FooterButton
+                  icon={Menu}
+                  data-testid="mobile-menu-navigation-picker"
+                >
+                  <FooterItemText>{t("menu")}</FooterItemText>
+                </FooterButton>
+              </TabsPrimitive.Trigger>
+            </div>
+          </TabsPrimitive.List>
+        </SheetFooter>
+      </TabsPrimitive.Root>
+    </MobileMenuClient>
   )
 }
 

src/components/ProductTable/Filter.tsx

@@ -14,6 +14,37 @@ interface FilterProps {
   onChange: (updatedFilter: FilterOption) => void
 }
 
+const arePropsEqual = (prevProps: FilterProps, nextProps: FilterProps) => {
+  if (prevProps.filterIndex !== nextProps.filterIndex) return false
+  if (prevProps.filter.title !== nextProps.filter.title) return false
+  if (prevProps.filter.showFilterOption !== nextProps.filter.showFilterOption)
+    return false
+
+  const prevItems = prevProps.filter.items
+  const nextItems = nextProps.filter.items
+
+  if (prevItems.length !== nextItems.length) return false
+
+  for (let i = 0; i < prevItems.length; i++) {
+    const prevItem = prevItems[i]
+    const nextItem = nextItems[i]
+
+    if (prevItem.filterKey !== nextItem.filterKey) return false
+    if (prevItem.inputState !== nextItem.inputState) return false
+
+    if (prevItem.options.length !== nextItem.options.length) return false
+
+    for (let j = 0; j < prevItem.options.length; j++) {
+      if (prevItem.options[j].filterKey !== nextItem.options[j].filterKey)
+        return false
+      if (prevItem.options[j].inputState !== nextItem.options[j].inputState)
+        return false
+    }
+  }
+
+  return true
+}
+
 const Filter = ({ filter, filterIndex, onChange }: FilterProps) => {
   const handleChange = (
     _: number,
@@ -110,4 +141,4 @@ const Filter = ({ filter, filterIndex, onChange }: FilterProps) => {
   )
 }
 
-export default memo(Filter)
+export default memo(Filter, arePropsEqual)