From af1d38a7b600e3328d88ca6948868a2740bc8dd5 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Thu, 23 May 2024 14:09:46 -0400
Subject: [PATCH] examples/next: disable animation on image loading to prevent
 SSR issues

---
 examples/next/src/app/components/Header.tsx | 3 ++-
 examples/next/src/app/page.tsx              | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx
index db644031..f10beb3b 100644
--- a/examples/next/src/app/components/Header.tsx
+++ b/examples/next/src/app/components/Header.tsx
@@ -9,7 +9,7 @@ export const Header = () => {
   return (
     <Box position="fixed" width="full" padding="5" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" />
+        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" disableAnimation />
         <Image
           style={{
             width: '24px'
@@ -17,6 +17,7 @@ export const Header = () => {
           }}
           src="kit-logo-text.svg"
           alt="Sequence Kit Text Logo"
+          disableAnimation
         />
       </Box>
       <Box>
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
index a3eda68c..9d16959b 100644
--- a/examples/next/src/app/page.tsx
+++ b/examples/next/src/app/page.tsx
@@ -16,10 +16,10 @@ export default function Home() {
       {!isConnected ? (
         <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
           <Box background="white" padding="2" borderRadius="sm">
-            <Image alt="Next" src="next.svg" height="3" />
+            <Image alt="Next" src="next.svg" height="3" disableAnimation />
           </Box>
           <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" />
+            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" disableAnimation />
             <Image
               alt="Sequence Kit Text Logo"
               style={{
@@ -27,6 +27,7 @@ export default function Home() {
                 // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
               }}
               src="kit-logo-text.svg"
+              disableAnimation
             />
           </Box>
           <Box gap="2" flexDirection="row" alignItems="center">