Wrap mobile menu nav onClick event with startTransition (#2242)

This prevents the menu from closing before the new page has loaded.
Shopify · Oct 25, 2022 · dc90315 · dc90315
1 parent 7187bff
commit dc90315
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/templates/demo-store/src/components/global/MenuDrawer.client.tsx b/templates/demo-store/src/components/global/MenuDrawer.client.tsx
@@ -2,6 +2,7 @@ import {EnhancedMenu} from '~/lib/utils';
 import {Text} from '~/components';
 import {Drawer} from './Drawer.client';
 import {Link} from '@shopify/hydrogen';
+import {startTransition} from 'react';
 
 export function MenuDrawer({
   isOpen,
@@ -32,7 +33,12 @@ function MenuMobileNav({
     <nav className="grid gap-4 p-6 sm:gap-6 sm:px-12 sm:py-8">
       {/* Top level menu items */}
       {(menu?.items || []).map((item) => (
-        <Link key={item.id} to={item.to} target={item.target} onClick={onClose}>
+        <Link
+          key={item.id}
+          to={item.to}
+          target={item.target}
+          onClick={() => startTransition(onClose)}
+        >
           <Text as="span" size="copy">
             {item.title}
           </Text>