Add memo to components

Add suspense for dynamic import

components/DarkModeBtn.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import useMounted from 'lib/hooks/useMounted';
 import { useTheme } from 'next-themes';
+import { memo } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';
 
 const DarkModeBtn = () => {
@@ -35,4 +36,4 @@ const DarkModeBtn = () => {
   );
 };
 
-export default DarkModeBtn;
+export default memo(DarkModeBtn);

components/Footer.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { FiGithub } from 'react-icons/fi';
 
 const nowDay = new Date().getFullYear();
@@ -25,4 +26,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default memo(Footer);

components/NavBar.tsx

@@ -3,7 +3,7 @@ import { DocSearch } from '@docsearch/react';
 import clsx from 'clsx';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 
 const DarkModeBtn = dynamic(() => import('components/DarkModeBtn'));
@@ -162,4 +162,4 @@ const HeadBar = () => {
   );
 };
 
-export default HeadBar;
+export default memo(HeadBar);

components/PostCard.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Post } from 'types';
 import clsx from 'clsx';
+import { memo } from 'react';
 
 interface Props {
   post: Post;
@@ -50,4 +51,4 @@ const PostCard = ({ post }: Props) => {
   );
 };
 
-export default PostCard;
+export default memo(PostCard);

components/RUA/Button.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { ButtonHTMLAttributes, DetailedHTMLProps, memo } from 'react';
 
 export type ButtonProps = {
   children: React.ReactNode;
@@ -36,4 +36,4 @@ const Button = ({ children, ...rest }: ButtonProps) => {
   );
 };
 
-export default Button;
+export default memo(Button);

components/RUA/RUACodeSandbox.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import useInView from 'lib/hooks/useInView';
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import RUALoading from './loading/RUALoading';
 
 const partten =
@@ -64,4 +64,4 @@ const RUACodeSandbox = ({ url }: Props) => {
   );
 };
 
-export default RUACodeSandbox;
+export default memo(RUACodeSandbox);

components/RUA/RUACodepen.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import useInView from 'lib/hooks/useInView';
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import RUALoading from './loading/RUALoading';
 
 export const commonClass = clsx(
@@ -63,15 +63,14 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
               'transition-all h-[402px]',
               'border-none',
               'absolute top-1/2 left-1/2',
-              '-translate-x-1/2 -translate-y-1/2'
+              '-translate-x-1/2 -translate-y-1/2',
+              'overflow-hidden'
             )}
             style={{
               width: 'calc(100% + 2px)',
             }}
             onLoad={handleLoad}
-            scrolling="no"
             src={src}
-            frameBorder="no"
             loading="lazy"
             allowFullScreen
           ></iframe>
@@ -81,4 +80,4 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
   );
 };
 
-export default RUACodepen;
+export default memo(RUACodepen);

components/RUA/RUAPagination.tsx

@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { DetailedHTMLProps, HTMLAttributes, memo } from 'react';
 
 const Button = dynamic(() => import('components/RUA/Button'));
 
@@ -59,4 +59,4 @@ const RUAPagination = ({
   );
 };
 
-export default RUAPagination;
+export default memo(RUAPagination);

components/RUA/RUASandpack.tsx

@@ -1,5 +1,6 @@
 import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
 import { useTheme } from 'next-themes';
+import { memo } from 'react';
 
 interface Props extends SandpackProps {}
 
@@ -19,4 +20,4 @@ const RUASandpack = ({ ...rest }: Props) => {
   );
 };
 
-export default RUASandpack;
+export default memo(RUASandpack);

components/RUA/loading/PostCardLoading.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import clsx from 'clsx';
 
 const PostCardLoading = () => {
@@ -26,4 +26,4 @@ const PostCardLoading = () => {
   );
 };
 
-export default PostCardLoading;
+export default memo(PostCardLoading);

components/RUA/loading/RUALoading.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import clsx from 'clsx';
 import loadingImage from 'public/images/img/mona-loading-default.gif';
 import loadingImageDimmed from 'public/images/img/mona-loading-dimmed.gif';
@@ -34,4 +34,4 @@ const RUALoading = ({ className: classNames }: Props) => {
   );
 };
 
-export default RUALoading;
+export default memo(RUALoading);

components/RUA/loading/VercelLoading.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { memo } from 'react';
 import styles from './VercelLoading.module.css';
 
 const VercelLoading = () => {
@@ -40,4 +41,4 @@ const VercelLoading = () => {
   );
 };
 
-export default VercelLoading;
+export default memo(VercelLoading);

components/RUA/tab/TabItem.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { memo } from 'react';
 
 export type ItemProps = {
   value: string | number;
@@ -16,4 +16,4 @@ const TabItem = ({ showContent, children }: ItemProps) => {
   );
 };
 
-export default TabItem;
+export default memo(TabItem);

components/RUA/tab/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { ItemProps } from './TabItem';
 
 type Props = {
@@ -56,4 +56,4 @@ const Tab = ({ defaultValue, children }: Props) => {
   );
 };
 
-export default Tab;
+export default memo(Tab);

components/common/BackToTop.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import Button from 'components/RUA/Button';
+import { memo } from 'react';
 import { FiChevronUp } from 'react-icons/fi';
 
 const BackToTop = () => {
@@ -15,7 +16,7 @@ const BackToTop = () => {
       <Button
         onClick={handleBack}
         className={clsx(
-          '!px-3 fixed',
+          '!p-3 fixed',
           'right-4 bottom-4',
           'lg:right-8 lg:bottom-8'
         )}
@@ -26,4 +27,4 @@ const BackToTop = () => {
   );
 };
 
-export default BackToTop;
+export default memo(BackToTop);

components/gists/FileContent.tsx

@@ -4,9 +4,10 @@ import dayjs from 'dayjs';
 import { GistData } from 'lib/fetcher';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
+import { memo, Suspense } from 'react';
 
 const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
-  loading: () => <Loading className="h-[300px]" />,
+  suspense: true,
 });
 
 type Props = {
@@ -37,7 +38,9 @@ const FileContent = ({ gists }: Props) => {
                 {/* Description */}
                 <p className="text-gray-500">{g.description}</p>
 
-                <GistsCode file={g.files[f]} />
+                <Suspense fallback={<Loading className="h-[300px]" />}>
+                  <GistsCode file={g.files[f]} />
+                </Suspense>
               </div>
             ))}
           </div>
@@ -47,4 +50,4 @@ const FileContent = ({ gists }: Props) => {
   );
 };
 
-export default FileContent;
+export default memo(FileContent);

components/gists/GistsCode.tsx

@@ -1,6 +1,6 @@
 import rehypePrism from '@mapbox/rehype-prism';
 import clsx from 'clsx';
-import { createElement, Fragment } from 'react';
+import { createElement, Fragment, memo } from 'react';
 import rehypeReact from 'rehype-react';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
@@ -76,4 +76,4 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
   );
 };
 
-export default GistsCode;
+export default memo(GistsCode);

components/gists/UserInfo.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { GetUser } from 'lib/fetcher';
 import Image from 'next/image';
 import avatar from 'public/images/img/avatar.svg';
+import { memo } from 'react';
 import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
 
 type Props = {
@@ -79,4 +80,4 @@ const UserInfo = ({ user }: Props) => {
   );
 };
 
-export default UserInfo;
+export default memo(UserInfo);

components/mdx/Anchor.tsx

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, forwardRef } from 'react';
+import { AnchorHTMLAttributes, forwardRef, memo } from 'react';
 import clsx from 'clsx';
 import { FiExternalLink } from 'react-icons/fi';
 
@@ -33,6 +33,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
     );
   }
 );
+
 Anchor.displayName = 'Anchor';
 
-export default Anchor;
+export default memo(Anchor);

components/mdx/Image.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import NextImage, { ImageProps } from 'next/image';
+import { memo } from 'react';
 
 interface Props extends ImageProps {}
 
@@ -18,4 +19,4 @@ const Image = ({ alt, ...rest }: Props) => {
   );
 };
 
-export default Image;
+export default memo(Image);

components/mdx/LinkAnchor.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ReactNode } from 'react';
+import { memo, ReactNode } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 
 interface Props {
@@ -26,4 +26,4 @@ const Anchor = ({ children, external = true }: Props) => {
   );
 };
 
-export default Anchor;
+export default memo(Anchor);

components/mdx/Pre.tsx

@@ -1,8 +1,13 @@
 import clsx from 'clsx';
+import CopyButton from 'components/post/CopyButton';
 import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
-import { DetailedHTMLProps, HTMLAttributes, lazy, useRef } from 'react';
+import {
-
+  DetailedHTMLProps,
-const CopyButton = lazy(() => import('components/post/CopyButton'));
+  HTMLAttributes,
+  memo,
+  useCallback,
+  useRef,
+} from 'react';
 
 type Props = {} & DetailedHTMLProps<
   HTMLAttributes<HTMLPreElement>,
@@ -14,11 +19,11 @@ const Pre = ({ ...rest }: Props) => {
 
   const preRef = useRef<HTMLPreElement>(null);
   const { copy } = useCopyToClipboard();
-  const handleCopy = () => {
+  const handleCopy = useCallback(() => {
     if (!preRef.current) throw new Error('Can not access pre element.');
     if (preRef.current.textContent == null) return;
     copy(preRef.current.textContent);
-  };
+  }, [copy]);
 
   return (
     <>
@@ -34,4 +39,4 @@ const Pre = ({ ...rest }: Props) => {
   );
 };
 
-export default Pre;
+export default memo(Pre);

components/post/CopyButton.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import styles from './CopytButton.module.css';
 
 export type CopyButtonProps = {
@@ -64,4 +64,4 @@ const CopyButton = ({ onCopy: onClick }: CopyButtonProps) => {
   );
 };
 
-export default CopyButton;
+export default memo(CopyButton);

components/post/PostComment.tsx

@@ -1,52 +1,27 @@
 import Giscus from '@giscus/react';
 import { useTheme } from 'next-themes';
-import useInView from 'lib/hooks/useInView';
+import { memo } from 'react';
-import Image from 'next/image';
 
 const PostComment = () => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
-  const { ref, inView } = useInView();
-
   return (
     <>
-      <div className="flex justify-center select-none">
+      <Giscus
-        {currentTheme === 'dark' ? (
+        repo="DefectingCat/DefectingCat.github.io"
-          <Image
+        repoId="MDEwOlJlcG9zaXRvcnkyMzk5MTUyNzk="
-            src="/images/img/comment-line-dark.svg"
+        categoryId="DIC_kwDODkzRD84B_43T"
-            width={300}
+        category="Announcements"
-            height={150}
+        mapping="pathname"
-            alt=""
+        reactionsEnabled="1"
-          />
+        emitMetadata="0"
-        ) : (
+        theme={currentTheme === 'dark' ? 'dark_dimmed' : 'light'}
-          <Image
+        loading="lazy"
-            src="/images/img/comment-line.svg"
+        inputPosition="top"
-            width={300}
+      />
-            height={150}
-            alt=""
-          />
-        )}
-      </div>
-
-      <div className="mt-4" ref={ref}>
-        {inView && (
-          <Giscus
-            repo="DefectingCat/DefectingCat.github.io"
-            repoId="MDEwOlJlcG9zaXRvcnkyMzk5MTUyNzk="
-            categoryId="DIC_kwDODkzRD84B_43T"
-            category="Announcements"
-            mapping="pathname"
-            reactionsEnabled="1"
-            emitMetadata="0"
-            theme={currentTheme === 'dark' ? 'dark_dimmed' : 'light'}
-            loading="lazy"
-            inputPosition="top"
-          />
-        )}
-      </div>
     </>
   );
 };
 
-export default PostComment;
+export default memo(PostComment);

components/post/PostCommnetLine.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+import { memo } from 'react';
+
+const PostCommnetLine = () => {
+  const { systemTheme, theme } = useTheme();
+  const currentTheme = theme === 'system' ? systemTheme : theme;
+
+  return (
+    <>
+      <div className="flex justify-center select-none">
+        {currentTheme === 'dark' ? (
+          <Image
+            src="/images/img/comment-line-dark.svg"
+            width={300}
+            height={150}
+            alt=""
+          />
+        ) : (
+          <Image
+            src="/images/img/comment-line.svg"
+            width={300}
+            height={150}
+            alt=""
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default memo(PostCommnetLine);

components/post/PostToc.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import Anchor from 'components/mdx/Anchor';
 import { SingleToc } from 'lib/utils';
-import { Fragment, useState } from 'react';
+import { Fragment, memo, useState } from 'react';
 import { FiChevronDown } from 'react-icons/fi';
 import styles from './PostToc.module.css';
 
@@ -77,4 +77,4 @@ const PostToc = ({ toc, tocLength }: Props) => {
   );
 };
 
-export default PostToc;
+export default memo(PostToc);

components/post/SlideToc.tsx

@@ -1,15 +0,0 @@
-import useMounted from 'lib/hooks/useMounted';
-
-const SlideToc = () => {
-  const { mounted } = useMounted();
-
-  return (
-    <>
-      <div className="flex justify-end">
-        <div className="toc"></div>
-      </div>
-    </>
-  );
-};
-
-export default SlideToc;

package.json

@@ -14,20 +14,20 @@
     "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\" --ignore-unknown"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^1.17.0",
+    "@codesandbox/sandpack-react": "^1.17.1",
     "@docsearch/react": "3",
     "@giscus/react": "^2.2.4",
     "@mapbox/rehype-prism": "^0.8.0",
     "@tweenjs/tween.js": "^18.6.4",
     "algoliasearch": "^4.14.2",
     "dayjs": "^1.11.6",
-    "next": "13.0.4",
+    "next": "13.0.6",
     "next-mdx-remote": "^4.2.0",
     "next-themes": "^0.2.1",
     "octokit": "^2.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.7.1",
     "rehype-react": "^7.1.1",
     "rehype-slug": "^5.1.0",
     "remark-frontmatter": "^4.0.1",
@@ -35,26 +35,26 @@
     "rua-three": "^1.1.1",
     "sharp": "^0.31.2",
     "stats.js": "^0.17.0",
-    "three": "^0.146.0"
+    "three": "^0.147.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
-    "@types/node": "18.11.9",
+    "@types/node": "18.11.10",
-    "@types/react": "18.0.25",
+    "@types/react": "18.0.26",
     "@types/stats.js": "^0.17.0",
     "@types/three": "^0.146.0",
     "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",
-    "eslint": "8.28.0",
+    "eslint": "8.29.0",
-    "eslint-config-next": "13.0.4",
+    "eslint-config-next": "13.0.6",
     "gray-matter": "^4.0.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "tailwindcss": "^3.2.4",
     "typescript": "4.9.3",
     "clsx": "^1.2.1"

pages/_app.tsx

@@ -2,7 +2,7 @@ import useRouterLoading from 'lib/hooks/useRouterLoading';
 import { ThemeProvider } from 'next-themes';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import 'styles/globals.css';
 import 'styles/prism-one-dark.css';
 import 'styles/prism-one-light.css';
@@ -10,7 +10,10 @@ import 'styles/rua.css';
 import { AppPropsWithLayout } from 'types';
 
 const VercelLoading = dynamic(
-  () => import('components/RUA/loading/VercelLoading')
+  () => import('components/RUA/loading/VercelLoading'),
+  {
+    suspense: true,
+  }
 );
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
@@ -42,9 +45,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         {getLayout(<Component {...pageProps} />)}
       </ThemeProvider>
 
-      {loading && <VercelLoading />}
+      <Suspense fallback>{loading && <VercelLoading />}</Suspense>
     </>
   );
 }
 
-export default MyApp;
+export default MyApp;

pages/about.tsx

@@ -1,16 +1,18 @@
 import TWEEN from '@tweenjs/tween.js';
 import clsx from 'clsx';
+import MainLayout from 'layouts/MainLayout';
 import { gltfLoader, manager } from 'lib/gltfLoader';
 import { getMousePosition } from 'lib/utils';
 import { useTheme } from 'next-themes';
 import dynamic from 'next/dynamic';
-import { useEffect, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import { InitFn, THREE, useThree } from 'rua-three';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { NextPageWithLayout } from 'types';
 
-const Loading = dynamic(() => import('components/RUA/loading/RUALoading'));
+const Loading = dynamic(() => import('components/RUA/loading/RUALoading'), {
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+  suspense: true,
+});
 
 const rotationY = 0.4;
 const rotationX = 0.2;
@@ -167,19 +169,21 @@ const About: NextPageWithLayout = () => {
     <>
       <div className="fixed top-0 left-0 -z-10">
         <canvas ref={ref} className="w-full h-full"></canvas>
-        {showLoading && (
+        <Suspense fallback>
-          <div
+          {showLoading && (
-            className={clsx(
+            <div
-              'absolute top-0 left-0',
+              className={clsx(
-              'items-center flex justify-center',
+                'absolute top-0 left-0',
-              'w-full h-full transition-all duration-500',
+                'items-center flex justify-center',
-              'bg-white dark:bg-rua-gray-900',
+                'w-full h-full transition-all duration-500',
-              loading ? 'opacity-1' : 'opacity-0'
+                'bg-white dark:bg-rua-gray-900',
-            )}
+                loading ? 'opacity-1' : 'opacity-0'
-          >
+              )}
-            <Loading />
+            >
-          </div>
+              <Loading />
-        )}
+            </div>
+          )}
+        </Suspense>
       </div>
 
       <main className="h-[calc(100vh-142px)] flex flex-col">
@@ -200,4 +204,4 @@ About.getLayout = function getLayout(page) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default About;
+export default About;

pages/blog/[page].tsx

@@ -1,16 +1,18 @@
 import PostCardLoading from 'components/RUA/loading/PostCardLoading';
+import MainLayout from 'layouts/MainLayout';
 import { getPostListPath, postLists, PostPerPage } from 'lib/posts';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
-import { ReactElement } from 'react';
+import { Fragment, ReactElement, Suspense } from 'react';
 import { Post } from 'types';
 
 const PostCard = dynamic(() => import('components/PostCard'), {
-  loading: () => <PostCardLoading />,
+  suspense: true,
+});
+const BlogList = dynamic(() => import('layouts/BlogList'), { suspense: true });
+const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+  suspense: true,
 });
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
-const BlogList = dynamic(() => import('layouts/BlogList'));
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'));
 
 const BlogPage = ({
   posts,
@@ -21,21 +23,29 @@ const BlogPage = ({
   return (
     <>
       <main className="max-w-4xl mx-auto">
-        <BlogList>
+        <Suspense fallback>
-          {posts.map((post) => (
+          <BlogList>
-            <PostCard key={post.slug} post={post} />
+            {posts.map((post) => (
-          ))}
+              <Fragment key={post.slug}>
-        </BlogList>
+                <Suspense fallback={<PostCardLoading />}>
+                  <PostCard post={post} />
+                </Suspense>
+              </Fragment>
+            ))}
+          </BlogList>
+        </Suspense>
 
-        <Pagination
+        <Suspense fallback>
-          className="py-6 mt-4 px-7 lg:px-5"
+          <Pagination
-          hasPrev={!!prev}
+            className="py-6 mt-4 px-7 lg:px-5"
-          hasNext={next <= total}
+            hasPrev={!!prev}
-          prevLink={prev === 1 ? '/blog' : `/blog/${prev}`}
+            hasNext={next <= total}
-          nextLink={`/blog/${next}`}
+            prevLink={prev === 1 ? '/blog' : `/blog/${prev}`}
-          current={next - 1}
+            nextLink={`/blog/${next}`}
-          total={total}
+            current={next - 1}
-        />
+            total={total}
+          />
+        </Suspense>
       </main>
     </>
   );
@@ -76,4 +86,4 @@ BlogPage.getLayout = function getLayout(page: ReactElement) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default BlogPage;
+export default BlogPage;

pages/blog/index.tsx

@@ -1,16 +1,18 @@
 import PostCardLoading from 'components/RUA/loading/PostCardLoading';
+import MainLayout from 'layouts/MainLayout';
 import { postLists, PostPerPage } from 'lib/posts';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
-import { ReactElement } from 'react';
+import { Fragment, ReactElement, Suspense } from 'react';
 import { Post } from 'types';
 
 const PostCard = dynamic(() => import('components/PostCard'), {
-  loading: () => <PostCardLoading />,
+  suspense: true,
+});
+const BlogList = dynamic(() => import('layouts/BlogList'), { suspense: true });
+const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+  suspense: true,
 });
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
-const BlogList = dynamic(() => import('layouts/BlogList'));
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'));
 
 const Blog = ({
   posts,
@@ -20,21 +22,29 @@ const Blog = ({
   return (
     <>
       <main className="max-w-4xl mx-auto">
-        <BlogList>
+        <Suspense fallback>
-          {posts.map((post) => (
+          <BlogList>
-            <PostCard key={post.slug} post={post} />
+            {posts.map((post) => (
-          ))}
+              <Fragment key={post.slug}>
-        </BlogList>
+                <Suspense fallback={<PostCardLoading />}>
+                  <PostCard post={post} />
+                </Suspense>
+              </Fragment>
+            ))}
+          </BlogList>
+        </Suspense>
 
-        <Pagination
+        <Suspense fallback>
-          className="py-6 mt-4 px-7 lg:px-5"
+          <Pagination
-          hasPrev={false}
+            className="py-6 mt-4 px-7 lg:px-5"
-          hasNext={next <= total}
+            hasPrev={false}
-          prevLink={''}
+            hasNext={next <= total}
-          nextLink={`/blog/${next}`}
+            prevLink={''}
-          current={1}
+            nextLink={`/blog/${next}`}
-          total={total}
+            current={1}
-        />
+            total={total}
+          />
+        </Suspense>
       </main>
     </>
   );
@@ -60,4 +70,4 @@ Blog.getLayout = function getLayout(page: ReactElement) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default Blog;
+export default Blog;

pages/g/[id].tsx

@@ -1,6 +1,7 @@
 import LinkAnchor from 'components/mdx/LinkAnchor';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import MainLayout from 'layouts/MainLayout';
 import { getGists, getSignalGist, SingalGist } from 'lib/fetcher';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
@@ -8,10 +9,11 @@ import Image from 'next/image';
 import Link from 'next/link';
 import avatar from 'public/images/img/avatar.svg';
 import { ParsedUrlQuery } from 'querystring';
-import { ReactElement } from 'react';
+import { Fragment, ReactElement, Suspense } from 'react';
 
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
-const GistsCode = dynamic(() => import('components/gists/GistsCode'));
+  suspense: true,
+});
 
 dayjs.extend(relativeTime);
 
@@ -45,11 +47,11 @@ const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
             <p className="pb-2 text-lg text-gray-500">{gist.description}</p>
 
             {Object.keys(gist.files).map((f) => (
-              <GistsCode
+              <Fragment key={gist.files[f].raw_url}>
-                key={gist.files[f].raw_url}
+                <Suspense fallback>
-                file={gist.files[f]}
+                  <GistsCode file={gist.files[f]} showFileName />
-                showFileName
+                </Suspense>
-              />
+              </Fragment>
             ))}
           </div>
         </div>
@@ -112,4 +114,4 @@ Gist.getLayout = function getLayout(page: ReactElement) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default Gist;
+export default Gist;

pages/gists/[p].tsx

@@ -1,15 +1,21 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import MainLayout from 'layouts/MainLayout';
 import { GetGists, getGists, GetUser, getUser } from 'lib/fetcher';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ParsedUrlQuery } from 'querystring';
-import { ReactElement } from 'react';
+import { ReactElement, Suspense } from 'react';
 
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const UserInfo = dynamic(() => import('components/gists/UserInfo'), {
-const UserInfo = dynamic(() => import('components/gists/UserInfo'));
+  suspense: true,
-const FileContent = dynamic(() => import('components/gists/FileContent'));
+});
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'));
+const FileContent = dynamic(() => import('components/gists/FileContent'), {
+  suspense: true,
+});
+const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+  suspense: true,
+});
 
 dayjs.extend(relativeTime);
 
@@ -24,19 +30,23 @@ const Gists = ({
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
-          <UserInfo user={user} />
+          <Suspense fallback>
+            <UserInfo user={user} />
+          </Suspense>
 
           <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
-            <FileContent gists={gists.gists} />
+            <Suspense fallback>
-            <Pagination
+              <FileContent gists={gists.gists} />
-              className="mt-4"
+              <Pagination
-              hasPrev={!!prev}
+                className="mt-4"
-              hasNext={!!next}
+                hasPrev={!!prev}
-              prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
+                hasNext={!!next}
-              nextLink={`/gists/${next}`}
+                prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
-              current={prev == null ? next - 1 : prev + 1}
+                nextLink={`/gists/${next}`}
-              total={total}
+                current={prev == null ? next - 1 : prev + 1}
-            />
+                total={total}
+              />
+            </Suspense>
           </div>
         </div>
       </main>
@@ -105,4 +115,4 @@ Gists.getLayout = function getLayout(page: ReactElement) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default Gists;
+export default Gists;

pages/gists/index.tsx

@@ -1,14 +1,20 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import MainLayout from 'layouts/MainLayout';
 import { GetGists, getGists, GetUser, getUser } from 'lib/fetcher';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
-import { ReactElement } from 'react';
+import { ReactElement, Suspense } from 'react';
 
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const UserInfo = dynamic(() => import('components/gists/UserInfo'), {
-const UserInfo = dynamic(() => import('components/gists/UserInfo'));
+  suspense: true,
-const FileContent = dynamic(() => import('components/gists/FileContent'));
+});
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'));
+const FileContent = dynamic(() => import('components/gists/FileContent'), {
+  suspense: true,
+});
+const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+  suspense: true,
+});
 
 dayjs.extend(relativeTime);
 
@@ -23,19 +29,23 @@ const Gists = ({
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
-          <UserInfo user={user} />
+          <Suspense fallback>
+            <UserInfo user={user} />
+          </Suspense>
 
           <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
-            <FileContent gists={gists.gists} />
+            <Suspense fallback>
-            <Pagination
+              <FileContent gists={gists.gists} />
-              className="mt-4"
+              <Pagination
-              hasPrev={!!prev}
+                className="mt-4"
-              hasNext={!!next}
+                hasPrev={!!prev}
-              prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
+                hasNext={!!next}
-              nextLink={`/gists/${next}`}
+                prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
-              current={prev == null ? next - 1 : prev + 1}
+                nextLink={`/gists/${next}`}
-              total={total}
+                current={prev == null ? next - 1 : prev + 1}
-            />
+                total={total}
+              />
+            </Suspense>
           </div>
         </div>
       </main>
@@ -74,4 +84,4 @@ Gists.getLayout = function getLayout(page: ReactElement) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default Gists;
+export default Gists;

pages/index.tsx

@@ -1,17 +1,19 @@
 import clsx from 'clsx';
+import MainLayout from 'layouts/MainLayout';
 import { gltfLoader, manager } from 'lib/gltfLoader';
 import { getMousePosition } from 'lib/utils';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import Image from 'next/image';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { InitFn, THREE, useThree } from 'rua-three';
 import styles from 'styles/index/index.module.css';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import type { NextPageWithLayout } from 'types';
 
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const Loading = dynamic(() => import('components/RUA/loading/RUALoading'), {
-const Loading = dynamic(() => import('components/RUA/loading/RUALoading'));
+  suspense: true,
+});
 
 const rotationY = 0.4;
 const rotationX = 0.18;
@@ -156,19 +158,21 @@ const Home: NextPageWithLayout = () => {
             ref={wrapper}
           >
             <canvas ref={ref} className="absolute top-0 left-0"></canvas>
-            {showLoading && (
+            <Suspense fallback>
-              <div
+              {showLoading && (
-                className={clsx(
+                <div
-                  'absolute top-0 left-0 z-10',
+                  className={clsx(
-                  'items-center flex justify-center',
+                    'absolute top-0 left-0 z-10',
-                  'w-full h-full transition-all duration-500',
+                    'items-center flex justify-center',
-                  'bg-white',
+                    'w-full h-full transition-all duration-500',
-                  loading ? 'opacity-1' : 'opacity-0'
+                    'bg-white',
-                )}
+                    loading ? 'opacity-1' : 'opacity-0'
-              >
+                  )}
-                <Loading />
+                >
-              </div>
+                  <Loading />
-            )}
+                </div>
+              )}
+            </Suspense>
           </div>
         </div>
       </main>
@@ -180,4 +184,4 @@ Home.getLayout = function getLayout(page) {
   return <MainLayout>{page}</MainLayout>;
 };
 
-export default Home;
+export default Home;

pages/p/[slug].tsx

@@ -1,25 +1,31 @@
 import rehypePrism from '@mapbox/rehype-prism';
 import components from 'components/mdx/components';
+import PostCommnetLine from 'components/post/PostCommnetLine';
 import PostToc from 'components/post/PostToc';
 import data from 'data/mdxData';
+import MainLayout from 'layouts/MainLayout';
+import useInView from 'lib/hooks/useInView';
 import { allPostsPath, readSinglePost } from 'lib/posts';
 import { generateToc, SingleToc } from 'lib/utils';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
 import dynamic from 'next/dynamic';
-import { ReactElement } from 'react';
+import { ReactElement, Suspense } from 'react';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const PostComment = dynamic(() => import('components/post/PostComment'), {
-const PostComment = dynamic(() => import('components/post/PostComment'));
+  suspense: true,
+});
 
 const Slug = ({
   mdxSource,
   toc,
   tocLength,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { ref, inView } = useInView();
+
   return (
     <>
       <main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
@@ -29,7 +35,11 @@ const Slug = ({
 
         <article id="post-content">
           <MDXRemote {...mdxSource} components={components as {}} />
-          <PostComment />
+
+          <PostCommnetLine />
+          <div ref={ref} className="mt-4">
+            <Suspense fallback>{inView && <PostComment />}</Suspense>
+          </div>
         </article>
       </main>
     </>

pages/projects.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
-import { ReactElement } from 'react';
+import { Fragment, ReactElement, Suspense } from 'react';
 import {
   SiGitea,
   SiNextdotjs,
@@ -12,9 +12,11 @@ import {
 } from 'react-icons/si';
 import { VscGithubInverted } from 'react-icons/vsc';
 import { HiPhoto } from 'react-icons/hi2';
+import MainLayout from 'layouts/MainLayout';
 
-const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const ProjectCard = dynamic(() => import('components/pages/ProjectCard'), {
-const ProjectCard = dynamic(() => import('components/pages/ProjectCard'));
+  suspense: true,
+});
 
 const iconMap = {
   gitea: <SiGitea />,
@@ -46,11 +48,14 @@ const Projects = ({
             )}
           >
             {projects.map((item) => (
-              <ProjectCard
+              <Fragment key={item.id}>
-                icon={iconMap[item.icon ?? 'github']}
+                <Suspense fallback>
-                key={item.id}
+                  <ProjectCard
-                project={item}
+                    icon={iconMap[item.icon ?? 'github']}
-              />
+                    project={item}
+                  />
+                </Suspense>
+              </Fragment>
             ))}
           </div>
         </div>
@@ -66,11 +71,14 @@ const Projects = ({
             )}
           >
             {selfHosts.map((item) => (
-              <ProjectCard
+              <Fragment key={item.id}>
-                icon={iconMap[item.icon ?? 'github']}
+                <Suspense fallback>
-                key={item.id}
+                  <ProjectCard
-                project={item}
+                    icon={iconMap[item.icon ?? 'github']}
-              />
+                    project={item}
+                  />
+                </Suspense>
+              </Fragment>
             ))}
           </div>
         </div>

yarn.lock

@@ -839,18 +839,18 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/sandpack-client@^1.12.1":
+"@codesandbox/sandpack-client@^1.17.1":
-  version "1.12.1"
+  version "1.17.1"
-  resolved "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-1.12.1.tgz#fa3b66ecb08547c47e1cdf6248f5004bf5be68fb"
+  resolved "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-1.17.1.tgz#2ebc56dccbedd78d794f28d5ca0ea63c454b5fe6"
-  integrity sha512-p79Sk41hrp5ojeHbgTU/JWNS3UcRJKewq+oRD6O6g3MzlhUnE+xO94ui79Td4aeU4fq0jGHeLHIHCW04WMK4Yg==
+  integrity sha512-36Lqls91hIRzEnsGn49bNs+sxi5mmMyHxwzPtDnxuhGrtr5OO7sHi7y9GfKTk081KnHqqXekjoH//1KmG3DYzw==
   dependencies:
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@codesandbox/sandpack-react@^1.17.0":
+"@codesandbox/sandpack-react@^1.17.1":
-  version "1.17.0"
+  version "1.17.1"
-  resolved "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-1.17.0.tgz#4d4f97319dc302388421d7df2639fa722c7f801a"
+  resolved "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-1.17.1.tgz#238f954c115fd25a51a1759c5c6d145b2fa3d9a5"
-  integrity sha512-8GzX/of2oOg22txbSApN6K3dPzwPs0n6ipoyXWRxS1cmXoxTId9Qzw/NmEx2seoXSvC0ItwrzzNIZPRFeZOJ3g==
+  integrity sha512-dE+1nReS1we/zgpcp/bqCpAXZp3hZVq6m5cQc3BEMkHjV2yZa/kPK7UZhvnMwj8Im/BKWDI2NRMzjUsIg3wTnA==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"
@@ -866,7 +866,7 @@
     "@codemirror/matchbrackets" "^0.19.3"
     "@codemirror/state" "^0.19.6"
     "@codemirror/view" "^0.19.32"
-    "@codesandbox/sandpack-client" "^1.12.1"
+    "@codesandbox/sandpack-client" "^1.17.1"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
     clean-set "^1.1.2"
@@ -1297,82 +1297,82 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
-"@next/env@13.0.4":
+"@next/env@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/env/-/env-13.0.4.tgz#249a21be88fa61e1a712939db00b9d02764831f4"
+  resolved "https://registry.npmjs.org/@next/env/-/env-13.0.6.tgz#3fcab11ffbe95bff127827d9f7f3139bc5e6adff"
-  integrity sha512-N5Z3bdxBzoxrC5bwykDFITzdWuwDteOdZ+7nxixY+I1XpRX8/iQYbw2wuXMdqdfBGm2NNUpAqg8YF2e4oAC2UQ==
+  integrity sha512-yceT6DCHKqPRS1cAm8DHvDvK74DLIkDQdm5iV+GnIts8h0QbdHvkUIkdOvQoOODgpr6018skbmSQp12z5OWIQQ==
 
-"@next/eslint-plugin-next@13.0.4":
+"@next/eslint-plugin-next@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.4.tgz#46800f48d9f81e8bb460319a15a00bf2f4016e91"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.6.tgz#4d73774ede50183c5ae5bab01ec4a7dd2d11fed5"
-  integrity sha512-jZ4urKT+aO9QHm3ttihrIQscQISDSKK8isAom750+EySn9o3LCSkTdPGBtvBqY7Yku+NqhfQempR5J58DqTaVg==
+  integrity sha512-JUANdYNCddhmQBjQQPxEJYL7GMCqYtbfrdmtX7c013srig7waNCG69Aoql7CgAgjdy8jn1ovHVdcF/NB46XN3Q==
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm-eabi@13.0.4":
+"@next/swc-android-arm-eabi@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.4.tgz#684fe26ff2a05b9dd8c4fb84bc87ba807e3bddc0"
+  resolved "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz#c971e5a3f8aae875ac1d9fdb159b7e126d8d98d5"
-  integrity sha512-SD9H+/zuV3L0oHIhsDdFkDqFtg6pIHtqRUPlsrNdOsmWXgMlSzxBmwt2ta4kyrazS62BQu7XRUG++ZyODS7AWg==
+  integrity sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==
 
-"@next/swc-android-arm64@13.0.4":
+"@next/swc-android-arm64@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.4.tgz#6bc985b78978fc42eaf723bbd21d3b27f673a1fe"
+  resolved "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz#ecacae60f1410136cc31f9e1e09e78e624ca2d68"
-  integrity sha512-F8W5WcBbdn/zBoy32/mQiefs9DNsT12CTSSVCsO8GvQR7GjJU+uduQ4drKcSDoDLuAFULc2jDN06Circq4vuQg==
+  integrity sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==
 
-"@next/swc-darwin-arm64@13.0.4":
+"@next/swc-darwin-arm64@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.4.tgz#2a471486bd0d5737104f62807b23cb9743e3cb08"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz#266e9e0908024760eba0dfce17edc90ffcba5fdc"
-  integrity sha512-/lajev+9GSie+rRTl5z8skW9RJwZ+TwMKLzzM24TbDk8lUjqPTyJZ/cU0NDj8J7VQAZ6EehACSh9rcJeBRtLuA==
+  integrity sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==
 
-"@next/swc-darwin-x64@13.0.4":
+"@next/swc-darwin-x64@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.4.tgz#f921ea5d09df6bb4fcace3639b9a2e4587212c0e"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.6.tgz#4be4ca7bc37f9c93d2e38be5ff313873ad758c09"
-  integrity sha512-HK4b2rFiju8d40GTL/jH9U6OQ7BYA2MeEHs7Dm7Rp7kwQtLzP3z6osdQS8er20tIFHDE4b+oVBy03ZUQkHf0Pg==
+  integrity sha512-SasCDJlshglsPnbzhWaIF6VEGkQy2NECcAOxPwaPr0cwbbt4aUlZ7QmskNzgolr5eAjFS/xTr7CEeKJtZpAAtQ==
 
-"@next/swc-freebsd-x64@13.0.4":
+"@next/swc-freebsd-x64@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.4.tgz#04f04f83aaa287fc8c429f688b431c39ce05ede3"
+  resolved "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz#42eb9043ee65ea5927ba550f4b59827d7064c47b"
-  integrity sha512-xBvIGLaGzZtgJfRRJ2DBN82DQCJ/O7jkXyBp8X/vHefPWyVXVqF6C68Rv8ADp11thPpf8WpjkvDDLb9AuWHQUA==
+  integrity sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==
 
-"@next/swc-linux-arm-gnueabihf@13.0.4":
+"@next/swc-linux-arm-gnueabihf@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.4.tgz#45b9f02bf722d212611819fe847fb58355c1dd4b"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz#aab663282b5f15d12bf9de1120175f438a44c924"
-  integrity sha512-s13pxNp9deKmmxEGTp1MoL1e4nf4wbEymEaHgFxUlhoR1OD9tK8oTNrQphQePJgVjzcWmRGH/dX7O9mVkHbU/g==
+  integrity sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==
 
-"@next/swc-linux-arm64-gnu@13.0.4":
+"@next/swc-linux-arm64-gnu@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.4.tgz#940c756543264a098ecfae1aa92129a5ff5540dd"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz#5e2b6df4636576a00befb7bd414820a12161a9af"
-  integrity sha512-Lklo65usNzoYwjX51CpDKOepWVZBdwO49/Jz3djxiYUr2lRtpDVnlfwCvzN+47j3BMVMWtC2ndIi8Q4s3J0v4g==
+  integrity sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==
 
-"@next/swc-linux-arm64-musl@13.0.4":
+"@next/swc-linux-arm64-musl@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.4.tgz#1a0c16a648973475214786472cafe4e03f2a07a7"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz#4a5e91a36cf140cad974df602d647e64b1b9473f"
-  integrity sha512-+3BXtXBwjVhd5lahDe5nKZ7EwD6hE/oLFQkITCvgxymU5qYHGlLFyF52/lyw8qhyxoCr7mMVsUFhlCzVwCfNjg==
+  integrity sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==
 
-"@next/swc-linux-x64-gnu@13.0.4":
+"@next/swc-linux-x64-gnu@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.4.tgz#5d6a92ebfb2226bd4c34be8edfc132283fd4b055"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz#accb8a721a99e704565b936f16e96fa0c67e8db1"
-  integrity sha512-QB8qoZrvHhZsz62nUrTKlp5IiZ8I7KZsaa6437H/W/NOZHLGJjCxROnhUjLvKVe/T5P86pjya2SUOUqWAjz4Pg==
+  integrity sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==
 
-"@next/swc-linux-x64-musl@13.0.4":
+"@next/swc-linux-x64-musl@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.4.tgz#060797dc921c4af73521fde2a4198855f9e3bb34"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz#2affaa2f4f01bc190a539d895118a6ad1a477645"
-  integrity sha512-WaahF6DYUQRg1QqIMcuOu2ZsFhS3aC5iWeQyeptMHklP9wb4FfTNmBArKHknX/GXD8P9gI38WTAHJ25cc0zVwg==
+  integrity sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==
 
-"@next/swc-win32-arm64-msvc@13.0.4":
+"@next/swc-win32-arm64-msvc@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.4.tgz#27629e72200cd479ad5231ae79e95291c476771d"
+  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz#28e5c042772865efd05197a8d1db5920156997fc"
-  integrity sha512-FD+k1j2jeY0aKcqcpzFKfTsv55PPmIZ5GKDyPjjV5AO6XvQ4nALwWl4JwizjH2426TfLXObb+C3MH0bl9Ok1Kw==
+  integrity sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==
 
-"@next/swc-win32-ia32-msvc@13.0.4":
+"@next/swc-win32-ia32-msvc@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.4.tgz#d7c89406b2a484f448c7b5af667b5eb537483695"
+  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz#30d91a6d847fa8bce9f8a0f9d2b469d574270be5"
-  integrity sha512-+Q/Q8Ydvz3X3U84CyZdNv1HC7fE43k+xB8C6b3IFmWGa5Tu2tfskQ2FsUNBrYreZjhFC/894J3rVQ6Vj6Auugg==
+  integrity sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==
 
-"@next/swc-win32-x64-msvc@13.0.4":
+"@next/swc-win32-x64-msvc@13.0.6":
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.4.tgz#2c3ede793e90d632e1dbdb0e4851f6f32132fba8"
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz#dfa28ddb335c16233d22cf39ec8cdf723e6587a1"
-  integrity sha512-vXtbo9N1FdtZZRcv4BliU28tTYrkb1EnVpUiiFFe88I6kS9aZVTMY9Z/OtDR52rl1JF1hgs9sL/59D/TQqSATQ==
+  integrity sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1742,10 +1742,10 @@
   resolved "https://registry.npmmirror.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
   integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
 
-"@swc/helpers@0.4.11":
+"@swc/helpers@0.4.14":
-  version "0.4.11"
+  version "0.4.14"
-  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
-  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
   dependencies:
     tslib "^2.4.0"
 
@@ -1929,10 +1929,10 @@
     jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
-"@types/jest@^29.2.3":
+"@types/jest@^29.2.4":
-  version "29.2.3"
+  version "29.2.4"
-  resolved "https://registry.npmjs.org/@types/jest/-/jest-29.2.3.tgz#f5fd88e43e5a9e4221ca361e23790d48fcf0a211"
+  resolved "https://registry.npmjs.org/@types/jest/-/jest-29.2.4.tgz#9c155c4b81c9570dbd183eb8604aa0ae80ba5a5b"
-  integrity sha512-6XwoEbmatfyoCjWRX7z0fKMmgYKe9+/HrviJ5k0X/tjJWHGAezZOfYaxqQKuzG/TvQyr+ktjm4jgbk0s4/oF2w==
+  integrity sha512-PipFB04k2qTRPePduVLTRiPzQfvMeLwUN3Z21hsAKaB/W9IIzgB2pizCL466ftJlcyZqnHoC9ZHpxLGl3fS86A==
   dependencies:
     expect "^29.0.0"
     pretty-format "^29.0.0"
@@ -1995,10 +1995,10 @@
   resolved "https://registry.npmmirror.com/@types/node/-/node-17.0.22.tgz#38b6c4b9b2f3ed9f2e376cce42a298fb2375251e"
   integrity sha512-8FwbVoG4fy+ykY86XCAclKZDORttqE5/s7dyWZKLXTdv3vRy5HozBEinG5IqhvPXXzIZEcTVbuHlQEI6iuwcmw==
 
-"@types/node@18.11.9":
+"@types/node@18.11.10":
-  version "18.11.9"
+  version "18.11.10"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.10.tgz#4c64759f3c2343b7e6c4b9caf761c7a3a05cee34"
-  integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
+  integrity sha512-juG3RWMBOqcOuXC643OAdSA525V44cVgGV6dUDuiFtss+8Fk5x1hI93Rsld43VeJVIeqlP9I7Fn9/qaVqoEAuQ==
 
 "@types/prettier@^2.1.5":
   version "2.4.4"
@@ -2026,10 +2026,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@18.0.25":
+"@types/react@18.0.26":
-  version "18.0.25"
+  version "18.0.26"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz#8b1dcd7e56fe7315535a4af25435e0bb55c8ae44"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
-  integrity sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==
+  integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3676,12 +3676,12 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@13.0.4:
+eslint-config-next@13.0.6:
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.4.tgz#78954caf26b3aa718bed077bce90c1f505db0005"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.6.tgz#bbbcfd6e50eacca54552f962e43c9e2c4fb52ef6"
-  integrity sha512-moEC7BW2TK7JKq3QfnaauqRjWzVcEf71gp5DbClpFPHM6QXE0u0uVvSTiHlmOgtCe1vyWAO+AhF87ZITd8mIDw==
+  integrity sha512-Tfn/0lirhkEuoGxKMtDQNtQuC7P3eHcyUyhIJY/OHtjU9ExHFtcge/Fe8Ou/Jd7DIC71vN3CT72oszVwia71cg==
   dependencies:
-    "@next/eslint-plugin-next" "13.0.4"
+    "@next/eslint-plugin-next" "13.0.6"
     "@rushstack/eslint-patch" "^1.1.3"
     "@typescript-eslint/parser" "^5.42.0"
     eslint-import-resolver-node "^0.3.6"
@@ -3807,10 +3807,10 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@8.28.0:
+eslint@8.29.0:
-  version "8.28.0"
+  version "8.29.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz#81a680732634677cc890134bcdd9fdfea8e63d6e"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz#d74a88a20fb44d59c51851625bc4ee8d0ec43f87"
-  integrity sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==
+  integrity sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==
   dependencies:
     "@eslint/eslintrc" "^1.3.3"
     "@humanwhocodes/config-array" "^0.11.6"
@@ -6840,31 +6840,30 @@ next-tick@^1.1.0:
   resolved "https://registry.npmmirror.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-next@13.0.4:
+next@13.0.6:
-  version "13.0.4"
+  version "13.0.6"
-  resolved "https://registry.npmjs.org/next/-/next-13.0.4.tgz#52fc9d72df4642ed28e66f42f85137a624a98062"
+  resolved "https://registry.npmjs.org/next/-/next-13.0.6.tgz#f9a2e9e2df9ad60e1b6b716488c9ad501a383621"
-  integrity sha512-4P0MvbjPCI1E/UPL1GrTXtYlgFnbBbY3JQ+AMY8jYE2SwyvCWctEJySoRjveznAHjrl6TIjuAJeB8u1c2StYUQ==
+  integrity sha512-COvigvms2LRt1rrzfBQcMQ2GZd86Mvk1z+LOLY5pniFtL4VrTmhZ9salrbKfSiXbhsD01TrDdD68ec3ABDyscA==
   dependencies:
-    "@next/env" "13.0.4"
+    "@next/env" "13.0.6"
-    "@swc/helpers" "0.4.11"
+    "@swc/helpers" "0.4.14"
     caniuse-lite "^1.0.30001406"
     postcss "8.4.14"
     styled-jsx "5.1.0"
-    use-sync-external-store "1.2.0"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "13.0.4"
+    "@next/swc-android-arm-eabi" "13.0.6"
-    "@next/swc-android-arm64" "13.0.4"
+    "@next/swc-android-arm64" "13.0.6"
-    "@next/swc-darwin-arm64" "13.0.4"
+    "@next/swc-darwin-arm64" "13.0.6"
-    "@next/swc-darwin-x64" "13.0.4"
+    "@next/swc-darwin-x64" "13.0.6"
-    "@next/swc-freebsd-x64" "13.0.4"
+    "@next/swc-freebsd-x64" "13.0.6"
-    "@next/swc-linux-arm-gnueabihf" "13.0.4"
+    "@next/swc-linux-arm-gnueabihf" "13.0.6"
-    "@next/swc-linux-arm64-gnu" "13.0.4"
+    "@next/swc-linux-arm64-gnu" "13.0.6"
-    "@next/swc-linux-arm64-musl" "13.0.4"
+    "@next/swc-linux-arm64-musl" "13.0.6"
-    "@next/swc-linux-x64-gnu" "13.0.4"
+    "@next/swc-linux-x64-gnu" "13.0.6"
-    "@next/swc-linux-x64-musl" "13.0.4"
+    "@next/swc-linux-x64-musl" "13.0.6"
-    "@next/swc-win32-arm64-msvc" "13.0.4"
+    "@next/swc-win32-arm64-msvc" "13.0.6"
-    "@next/swc-win32-ia32-msvc" "13.0.4"
+    "@next/swc-win32-ia32-msvc" "13.0.6"
-    "@next/swc-win32-x64-msvc" "13.0.4"
+    "@next/swc-win32-x64-msvc" "13.0.6"
 
 node-abi@^3.3.0:
   version "3.8.0"
@@ -7451,10 +7450,10 @@ prepend-http@^2.0.0:
   resolved "https://registry.npmmirror.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==
 
-prettier@^2.7.1:
+prettier@^2.8.0:
-  version "2.7.1"
+  version "2.8.0"
-  resolved "https://registry.npmmirror.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz#c7df58393c9ba77d6fba3921ae01faf994fb9dc9"
-  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+  integrity sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==
 
 pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.1:
   version "27.5.1"
@@ -7599,10 +7598,10 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-icons@^4.6.0:
+react-icons@^4.7.1:
-  version "4.6.0"
+  version "4.7.1"
-  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz#f83eda179af5d02c047449a20b702c858653d397"
+  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
-  integrity sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==
+  integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
 
 react-is@^16.13.1:
   version "16.13.1"
@@ -8510,10 +8509,10 @@ textextensions@2:
   resolved "https://registry.npmmirror.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
   integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
 
-three@^0.146.0:
+three@^0.147.0:
-  version "0.146.0"
+  version "0.147.0"
-  resolved "https://registry.npmjs.org/three/-/three-0.146.0.tgz#fd80f0d128ab4bb821a02191ae241e4e6326f17a"
+  resolved "https://registry.npmjs.org/three/-/three-0.147.0.tgz#1974af9e8e0c1efb3a8561334d57c0b6c29a7951"
-  integrity sha512-1lvNfLezN6OJ9NaFAhfX4sm5e9YCzHtaRgZ1+B4C+Hv6TibRMsuBAM5/wVKzxjpYIlMymvgsHEFrrigEfXnb2A==
+  integrity sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==
 
 through@^2.3.6:
   version "2.3.8"
@@ -8953,11 +8952,6 @@ url@0.10.3:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-sync-external-store@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 user-home@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"