feat: add loading state to full demo

Author: transitive-bullshit

examples/full/components/Loading.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { LoadingIcon } from './LoadingIcon'
+
+import styles from './styles.module.css'
+
+export const Loading: React.FC = () => (
+  <div className={styles.container}>
+    <LoadingIcon />
+  </div>
+)

examples/full/components/LoadingIcon.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import cs from 'classnames'
+import styles from './styles.module.css'
+
+export const LoadingIcon = (props) => {
+  const { className, ...rest } = props
+  return (
+    <svg
+      className={cs(styles.loadingIcon, className)}
+      {...rest}
+      viewBox='0 0 24 24'
+    >
+      <defs>
+        <linearGradient
+          x1='28.1542969%'
+          y1='63.7402344%'
+          x2='74.6289062%'
+          y2='17.7832031%'
+          id='linearGradient-1'
+        >
+          <stop stopColor='rgba(164, 164, 164, 1)' offset='0%' />
+          <stop
+            stopColor='rgba(164, 164, 164, 0)'
+            stopOpacity='0'
+            offset='100%'
+          />
+        </linearGradient>
+      </defs>
+
+      <g id='Page-1' stroke='none' strokeWidth='1' fill='none'>
+        <g transform='translate(-236.000000, -286.000000)'>
+          <g transform='translate(238.000000, 286.000000)'>
+            <circle
+              id='Oval-2'
+              stroke='url(#linearGradient-1)'
+              strokeWidth='4'
+              cx='10'
+              cy='12'
+              r='10'
+            />
+            <path
+              d='M10,2 C4.4771525,2 0,6.4771525 0,12'
+              id='Oval-2'
+              stroke='rgba(164, 164, 164, 1)'
+              strokeWidth='4'
+            />
+            <rect
+              id='Rectangle-1'
+              fill='rgba(164, 164, 164, 1)'
+              x='8'
+              y='0'
+              width='4'
+              height='4'
+              rx='8'
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}

examples/full/components/NotionPage.tsx

@@ -3,12 +3,15 @@ import Head from 'next/head'
 import Link from 'next/link'
 import Image from 'next/image'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 
 import { NotionRenderer } from 'react-notion-x'
 import { ExtendedRecordMap } from 'notion-types'
 import { getPageTitle } from 'notion-utils'
 import { Tweet, TwitterContextProvider } from 'react-static-tweets'
 
+import { Loading } from './Loading'
+
 // -----------------------------------------------------------------------------
 // dynamic imports for optional components
 // -----------------------------------------------------------------------------
@@ -48,6 +51,12 @@ export const NotionPage = ({
   rootPageId?: string
   rootDomain?: string
 }) => {
+  const router = useRouter()
+
+  if (router.isFallback) {
+    return <Loading />
+  }
+
   if (!recordMap) {
     return null
   }

examples/full/components/styles.module.css

@@ -0,0 +1,22 @@
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.container {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: calc(min(2vmin, 24px));
+}
+
+.loadingIcon {
+  animation: spinner 0.6s linear infinite;
+  display: block;
+  width: 24px;
+  height: 24px;
+  color: rgba(55, 53, 47, 0.4);
+}

readme.md

@@ -28,7 +28,7 @@
 
 If you just want to publish a website using Notion, then we highly recommend using [Super.so](https://s.super.so/x) — a hosted solution with great perf that takes care of all the details for you.
 
-If you want more control over your website via React, we recommend using either `react-notion-x` or the accompanying [Next.js starter kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit), which is free and uses `react-notion-x` under the hood.
+If you want more control over your website via React, then we recommend checking out the accompanying [Next.js starter kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit), which is free and uses `react-notion-x` under the hood.
 
 And if you want even more control, then you're in the right place! 👇👇
 
@@ -40,7 +40,7 @@ And if you want even more control, then you're in the right place! 👇👇
   - Heavier components can be loaded lazily via `next/dynamic`
 - 💯 **Tests** - Comes with a comprehensive [test suite](https://www.notion.so/Notion-Test-Suite-067dd719a912471ea9a3ac10710e7fdf) covering most of Notion's functionality
 - 🔥 **Solid** - Used in production by [Potion](https://www.potion.so) and thousands of websites
-- 💪 **Smooth** - Supports `next/image` along with LQIP preview images ([demo](https://react-notion-x-demo.transitivebullsh.it/image-sizing-3492bd6dbaf44fe7a5cac62c5d402f06))
+- 💪 **Smooth** - Supports `next/image` along with LQIP preview images ([demo](https://react-notion-x-demo.transitivebullsh.it/3492bd6dbaf44fe7a5cac62c5d402f06))
 - Framework agnostic - Use with next.js, create-react-app, gatsby, etc
 
 ## Usage
@@ -68,7 +68,7 @@ export default ({ recordMap }) => (
 
 You may optionally pass an `authToken` to the API if you want to access private Notion resources.
 
-Note: for heavier blocks, you'll have to opt into using them via `NotionRenderer.components`. These are not included in the default `NotionRenderer` export because they're too heavyweight for the majority of use cases.
+Note: for heavier blocks, you'll have to opt into using them via `NotionRenderer.components`. These are not included in the default `NotionRenderer` export because they're too heavyweight for a lot of use cases.
 
 ## Styles
 
@@ -247,12 +247,12 @@ Bundlephobia reports a [~27.5kb gzip bundle size](https://bundlephobia.com/resul
 
 Another major factor for perf comes from images hosted by Notion. They're generally unoptimized, improperly sized, and not cacheable because Notion has to deal with fine-grained access control that users can change at any time. You can override the default `mapImageUrl` function on `NotionRenderer` to add caching via a CDN like Cloudflare Workers, which is what Notion X does for optimal page load speeds.
 
-`NotionRenderer` also supports lazy image loading with optional low quality image placeholder previews. You can see a demo of this in practice [on this page](https://react-notion-x-demo.transitivebullsh.it/image-sizing-3492bd6dbaf44fe7a5cac62c5d402f06) which is using [lqip-modern](https://github.com/transitive-bullshit/lqip-modern) to pre-generate placeholder images that are inspired by Medium.com's image loading.
+`NotionRenderer` also supports lazy image loading with optional low quality image placeholder previews. You can see a demo of this in practice [on this page](https://react-notion-x-demo.transitivebullsh.it/3492bd6dbaf44fe7a5cac62c5d402f06) which is using [lqip-modern](https://github.com/transitive-bullshit/lqip-modern) to pre-generate placeholder images that are inspired by Medium.com's image loading.
 
 <p align="center">
   <img alt="Google Lighthouse Scores" src="https://raw.githubusercontent.com/NotionX/react-notion-x/master/media/react-notion-x-perf.png" width="600" />
   <br>
-  <i>Google Lighthouse scores for an <a href="https://react-notion-x-demo.transitivebullsh.it/checklists-38fa73d49b8f40aab1f3f8c82332e518">example page</a> hosted by Notion X.</i>
+  <i>Google Lighthouse scores for an <a href="https://react-notion-x-demo.transitivebullsh.it/38fa73d49b8f40aab1f3f8c82332e518">example page</a> rendered by `react-notion-x` on Vercel.</i>
 </p>
 
 ## Related