From 46c005695b040782687d38219c1e2f6fae3f159a Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 29 Nov 2022 14:53:00 +0900
Subject: [PATCH 1/2] Fix terminal warnings about Image withtout altText

---
 templates/demo-store/app/components/Hero.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/demo-store/app/components/Hero.tsx b/templates/demo-store/app/components/Hero.tsx
index 57d1c183fe..c66dfb5ab9 100644
--- 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={{

From 2d90510a2a0cf47cfd5a7cf5e351c16ee4df810b Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 29 Nov 2022 16:37:31 +0900
Subject: [PATCH 2/2] Try to fix hydration errors

---
 .../app/components/CountrySelector.tsx          |  7 ++++++-
 templates/demo-store/app/components/Layout.tsx  | 17 +++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/templates/demo-store/app/components/CountrySelector.tsx b/templates/demo-store/app/components/CountrySelector.tsx
index f99184ea12..8238d5f5fe 100644
--- 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/Layout.tsx b/templates/demo-store/app/components/Layout.tsx
index 302d6ba2e5..271750d843 100644
--- 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}
               </>