fallbacks

src/components/atoms/Time.tsx

@@ -3,18 +3,38 @@ import loadable from '@loadable/component'
 
 const LazyDate = loadable.lib(() => import('date-fns'))
 
+function TimeMarkup({
+  date,
+  format,
+  formatDistance
+}: {
+  date: Date
+  format?: any
+  formatDistance?: any
+}) {
+  const dateIso = date.toISOString()
+
+  return (
+    <time
+      title={format ? format(date, 'yyyy/MM/dd HH:mm') : dateIso}
+      dateTime={dateIso}
+    >
+      {format ? formatDistance(date, Date.now(), { addSuffix: true }) : dateIso}
+    </time>
+  )
+}
+
 export default function Time({ date }: { date: string }) {
   const dateNew = new Date(date)
 
   return (
-    <LazyDate>
+    <LazyDate fallback={<TimeMarkup date={dateNew} />}>
       {({ format, formatDistance }) => (
-        <time
+        <TimeMarkup
-          title={format(dateNew, 'yyyy/MM/dd HH:mm')}
+          date={dateNew}
-          dateTime={dateNew.toISOString()}
+          format={format}
-        >
+          formatDistance={formatDistance}
-          {formatDistance(dateNew, Date.now(), { addSuffix: true })}
+        />
-        </time>
       )}
     </LazyDate>
   )

src/pages/thanks.tsx

@@ -1,4 +1,5 @@
-import React, { lazy, Suspense } from 'react'
+import React from 'react'
+import loadable from '@loadable/component'
 import shortid from 'shortid'
 import Helmet from 'react-helmet'
 import { Author } from '../@types/Site'
@@ -7,7 +8,9 @@ import Qr from '../components/atoms/Qr'
 import Icon from '../components/atoms/Icon'
 import styles from './thanks.module.scss'
 
-const Web3Donation = lazy(() => import('../components/molecules/Web3Donation'))
+const Web3Donation = loadable(() =>
+  import('../components/molecules/Web3Donation')
+)
 
 const Coin = ({ address, author }: { address: string; author: Author }) => (
   <div className={styles.coin}>
@@ -29,7 +32,6 @@ export default function Thanks() {
   const coins = Object.keys(author).filter(
     key => key === 'bitcoin' || key === 'ether'
   )
-  const isSSR = typeof window === 'undefined'
 
   return (
     <>
@@ -43,9 +45,11 @@ export default function Thanks() {
         <header>
           <h1 className={styles.title}>Say Thanks</h1>
         </header>
-        {!isSSR && (
+
-          <Suspense fallback={<div className={styles.loading}>Loading...</div>}>
+        <Web3Donation
-            <Web3Donation address={author.ether} />
+          fallback={<div className={styles.loading}>Loading...</div>}
+          address={author.ether}
+        />
 
         <div className={styles.coins}>
           <header>
@@ -54,15 +58,9 @@ export default function Thanks() {
           </header>
 
           {coins.map((address: string) => (
-                <Coin
+            <Coin key={shortid.generate()} address={address} author={author} />
-                  key={shortid.generate()}
-                  address={address}
-                  author={author}
-                />
           ))}
         </div>
-          </Suspense>
-        )}
       </article>
     </>
   )