newslettr: load modal code dynamically

serlo · Jul 29, 2024 · a19b56d · a19b56d
1 parent e61822f
commit a19b56d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/apps/web/src/components/modal-with-close-button.tsx b/apps/web/src/components/modal-with-close-button.tsx
@@ -10,7 +10,7 @@ import { FaIcon } from './fa-icon'
 import { useInstanceData } from '@/contexts/instance-context'
 import { cn } from '@/helper/cn'
 
-interface ModalWithCloseButtonProps {
+export interface ModalWithCloseButtonProps {
   title?: string
   isOpen: boolean
   setIsOpen: (open: boolean) => void

diff --git a/apps/web/src/components/scripts/newsletter-popup.tsx b/apps/web/src/components/scripts/newsletter-popup.tsx
@@ -1,7 +1,8 @@
+import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import { useEffect, useState } from 'react'
 
-import { ModalWithCloseButton } from '../modal-with-close-button'
+import type { ModalWithCloseButtonProps } from '../modal-with-close-button'
 import { useInstanceData } from '@/contexts/instance-context'
 import { Instance } from '@/fetcher/graphql-types/operations'
 import { useScrollUpTrigger } from '@/helper/use-scroll-up-trigger'
@@ -45,6 +46,10 @@ const pages = [
 const imageSrc =
   'https://assets.serlo.org/db99f830-6f49-11ed-b282-836733dd2d87/SerloStandorte.jpg'
 
+const ModalWithCloseButton = dynamic<ModalWithCloseButtonProps>(() =>
+  import('../modal-with-close-button').then((mod) => mod.ModalWithCloseButton)
+)
+
 export function NewsletterPopup() {
   const { lang } = useInstanceData()
   const [shouldLoad, setShouldLoad] = useState(false)