Merge pull request #252 from Shopify/fd-general-fixes

General fixes
Shopify · Nov 30, 2022 · c4e5746 · c4e5746
2 parents 9f22f55 + 2d90510
commit c4e5746
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/templates/demo-store/app/components/CountrySelector.tsx b/templates/demo-store/app/components/CountrySelector.tsx
@@ -28,6 +28,11 @@ export function CountrySelector() {
     triggerOnce: true,
   });
 
+  const observerRef = useRef(null);
+  useEffect(() => {
+    ref(observerRef.current);
+  }, [ref, observerRef]);
+
   // Get available countries list when in view
   useEffect(() => {
     if (!inView || fetcher.data || fetcher.state === 'loading') return;
@@ -40,7 +45,7 @@ export function CountrySelector() {
 
   return (
     <section
-      ref={ref}
+      ref={observerRef}
       className="grid gap-4 w-full md:max-w-[335px] md:ml-auto"
       onMouseLeave={closeDropdown}
     >

diff --git a/templates/demo-store/app/components/Hero.tsx b/templates/demo-store/app/components/Hero.tsx
@@ -42,7 +42,7 @@ export function Hero({
       >
         <div className="absolute inset-0 grid flex-grow grid-flow-col pointer-events-none auto-cols-fr -z-10 content-stretch overflow-clip">
           {spread?.reference && (
-            <div className="">
+            <div>
               <SpreadMedia
                 scale={2}
                 sizes={
@@ -110,6 +110,7 @@ function SpreadMedia({
   return (
     <MediaFile
       data={data}
+      alt={data.alt}
       className="block object-cover w-full h-full"
       // @ts-expect-error Need to update the types in H-UI to allow optional properties on this object
       mediaOptions={{

diff --git a/templates/demo-store/app/components/Layout.tsx b/templates/demo-store/app/components/Layout.tsx
@@ -470,14 +470,15 @@ function FooterMenu({menu}: {menu?: EnhancedMenu}) {
                       open ? `max-h-48 h-fit` : `max-h-0 md:max-h-fit`
                     } overflow-hidden transition-all duration-300`}
                   >
-                    {/* @todo: the `static` prop causes a Suspense warning */}
-                    <Disclosure.Panel static>
-                      <nav className={styles.nav}>
-                        {item.items.map((subItem) => (
-                          <FooterLink key={subItem.id} item={subItem} />
-                        ))}
-                      </nav>
-                    </Disclosure.Panel>
+                    <Suspense data-comment="This suspense fixes a hydration bug in Disclosure.Panel with static prop">
+                      <Disclosure.Panel static>
+                        <nav className={styles.nav}>
+                          {item.items.map((subItem) => (
+                            <FooterLink key={subItem.id} item={subItem} />
+                          ))}
+                        </nav>
+                      </Disclosure.Panel>
+                    </Suspense>
                   </div>
                 ) : null}
               </>