examples/next: disable animation on image loading to prevent SSR issues

0xsequence · May 23, 2024 · af1d38a · af1d38a
1 parent f8b8225
commit af1d38a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx
@@ -9,14 +9,15 @@ 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'
             // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
           }}
           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
@@ -16,17 +16,18 @@ 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={{
                 width: '32px'
                 // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
               }}
               src="kit-logo-text.svg"
+              disableAnimation
             />
           </Box>
           <Box gap="2" flexDirection="row" alignItems="center">