fix(web): Stop server side rendering some dynamically imported footers (

#14634)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/Organization/Wrapper/Themes/FiskistofaTheme/FiskistofaFooter.css.ts

@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css'
-import { themeUtils } from '@island.is/island-ui/theme'
+
+import { theme, themeUtils } from '@island.is/island-ui/theme'
 
 export const container = style({
   background: 'linear-gradient(180deg, #E6F2FB 21.56%, #90D9E3 239.74%)',
@@ -42,3 +43,7 @@ export const bsiLogo = style({
 export const bsiLogoMobile = style({
   height: '40px',
 })
+
+export const marginLeft = style({
+  marginLeft: theme.spacing[2],
+})

apps/web/components/Organization/Wrapper/Themes/FiskistofaTheme/FiskistofaFooter.tsx

@@ -2,20 +2,19 @@ import { ReactNode } from 'react'
 import cn from 'classnames'
 import { BLOCKS } from '@contentful/rich-text-types'
 
+import { SliceType } from '@island.is/island-ui/contentful'
 import {
-  Box,
   GridColumn,
   GridContainer,
   GridRow,
   Hyphen,
   Text,
 } from '@island.is/island-ui/core'
+import { theme } from '@island.is/island-ui/theme'
 import { FooterItem } from '@island.is/web/graphql/schema'
+import { useNamespace } from '@island.is/web/hooks'
 import { useWindowSize } from '@island.is/web/hooks/useViewport'
-import { theme } from '@island.is/island-ui/theme'
-import { SliceType } from '@island.is/island-ui/contentful'
 import { webRichText } from '@island.is/web/utils/richText'
-import { useNamespace } from '@island.is/web/hooks'
 
 import * as styles from './FiskistofaFooter.css'
 
@@ -35,19 +34,19 @@ const FiskistofaFooter = ({
 
   return (
     <footer>
-      <Box className={styles.container}>
+      <div className={styles.container}>
         <GridContainer className={styles.mainColumn}>
           <GridColumn>
             <GridRow>
-              <Box marginLeft={2}>
+              <div className={styles.marginLeft}>
                 <img
                   src={n(
                     'fiskistofaFooterLogo',
                     'https://images.ctfassets.net/8k0h54kbe6bj/2JSIJ4WbQ4Up84KQlMnIBb/34c1a74806884e456e3ab809a54d41f6/fiskistofa-footer-logo.png',
                   )}
                   alt="fiskistofa-logo"
                 />
-              </Box>
+              </div>
             </GridRow>
             <GridRow marginTop={2} className={styles.linkRow}>
               {footerItems.slice(0, 3).map((item, idx) => (
@@ -91,7 +90,7 @@ const FiskistofaFooter = ({
                       ),
                     },
                   })}
-                  <Box className={styles.iconContainer}>
+                  <div className={styles.iconContainer}>
                     <img
                       src={n(
                         'fiskistofaGraenSkrefLogo',
@@ -121,13 +120,13 @@ const FiskistofaFooter = ({
                         [styles.bsiLogoMobile]: isMobile,
                       })}
                     />
-                  </Box>
+                  </div>
                 </GridColumn>
               )}
             </GridRow>
           </GridColumn>
         </GridContainer>
-      </Box>
+      </div>
     </footer>
   )
 }

apps/web/components/Organization/Wrapper/Themes/HeilbrigdisstofnunAusturlandsTheme/index.ts

@@ -4,7 +4,7 @@ import Header from './HeilbrigdisstofnunAusturlandsHeader'
 
 export const HeilbrigdisstofnunAusturlandsFooter = dynamic(
   () => import('./HeilbrigdisstofnunAusturlandsFooter'),
-  { ssr: true },
+  { ssr: false },
 )
 
 export const HeilbrigdisstofnunAusturlandsHeader = Header

apps/web/components/Organization/Wrapper/Themes/HeilbrigdisstofnunNordurlandsTheme/index.ts

@@ -6,5 +6,5 @@ export const HeilbrigdisstofnunNordurlandsHeader = Header
 
 export const HeilbrigdisstofnunNordurlandsFooter = dynamic(
   () => import('./HeilbrigdisstofnunNordurlandsFooter'),
-  { ssr: true },
+  { ssr: false },
 )

apps/web/components/Organization/Wrapper/Themes/HeilbrigdisstofnunSudurlandsTheme/index.ts

@@ -6,5 +6,5 @@ export const HeilbrigdisstofnunSudurlandsHeader = Header
 
 export const HeilbrigdisstofnunSudurlandsFooter = dynamic(
   () => import('./HeilbrigdisstofnunSudurlandsFooter'),
-  { ssr: true },
+  { ssr: false },
 )

apps/web/components/Organization/Wrapper/Themes/HveTheme/index.ts

@@ -3,4 +3,4 @@ import dynamic from 'next/dynamic'
 import Header from './HveHeader'
 
 export const HveHeader = Header
-export const HveFooter = dynamic(() => import('./HveFooter'), { ssr: true })
+export const HveFooter = dynamic(() => import('./HveFooter'), { ssr: false })

apps/web/components/Organization/Wrapper/Themes/IcelandicNaturalDisasterInsuranceTheme/IcelandicNaturalDisasterInsuranceFooter.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react'
+
 import { SliceType } from '@island.is/island-ui/contentful'
 import {
   Box,
@@ -25,7 +27,11 @@ const IcelandicNaturalDisasterInsuranceFooter = ({
 }: IcelandicNaturalDisasterInsuranceFooterProps) => {
   const n = useNamespace(namespace)
   const { width } = useWindowSize()
-  const shouldWrap = width < theme.breakpoints.xl
+  const [shouldWrap, setShouldWrap] = useState(false)
+
+  useEffect(() => {
+    setShouldWrap(width < theme.breakpoints.xl)
+  }, [width])
 
   return (
     <footer className={styles.footer}>

apps/web/components/Organization/Wrapper/Themes/LandlaeknirTheme/index.ts

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic'
 import Header from './LandlaeknirHeader'
 
 export const LandlaeknirFooter = dynamic(() => import('./LandlaeknirFooter'), {
-  ssr: true,
+  ssr: false,
 })
 
 export const LandlaeknirHeader = Header