remove package nprogress

components/AOSAnimation.js

@@ -1,5 +1,5 @@
+import { isBrowser } from '@/lib/utils'
 import AOS from 'aos'
-import { isBrowser } from 'react-notion-x'
 
 /**
  * 加载滚动动画

components/LoadingProgress.js

@@ -1,20 +1,36 @@
+import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
-import NProgress from 'nprogress'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * 出现页面加载进度条
  */
 export default function LoadingProgress() {
   const router = useRouter()
+  const [NProgress, setNProgress] = useState(null)
   // 加载进度条
   useEffect(() => {
-    const handleStart = (url) => {
-      NProgress.start()
+    loadExternalResource(
+      'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js',
+      'js'
+    ).then(() => {
+      if (window.NProgress) {
+        setNProgress(window.NProgress)
+        // 调速
+        window.NProgress.settings.minimun = 0.1
+        loadExternalResource(
+          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css',
+          'css'
+        )
+      }
+    })
+
+    const handleStart = url => {
+      NProgress?.start()
     }
 
     const handleStop = () => {
-      NProgress.done()
+      NProgress?.done()
     }
 
     router.events.on('routeChangeStart', handleStart)

package.json

@@ -35,7 +35,6 @@
         "next": "13.3.1",
         "notion-client": "6.15.6",
         "notion-utils": "6.15.6",
-        "nprogress": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-facebook": "^8.1.4",

pages/_app.js

@@ -1,24 +1,23 @@
 // import '@/styles/animate.css' // @see https://animate.style/
 import '@/styles/globals.css'
-import '@/styles/nprogress.css'
 import '@/styles/utility-patterns.css'
 
 // core styles shared by all of react-notion-x (required)
-import 'react-notion-x/src/styles.css'
 import '@/styles/notion.css' //  重写部分样式
 import 'aos/dist/aos.css' // You can also use <link> for styles
+import 'react-notion-x/src/styles.css'
 
+import useAdjustStyle from '@/hooks/useAdjustStyle'
 import { GlobalContextProvider } from '@/lib/global'
 import { getGlobalLayoutByTheme } from '@/themes/theme'
 import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import { getQueryParam } from '../lib/utils'
-import useAdjustStyle from '@/hooks/useAdjustStyle'
 
 // 各种扩展插件 这个要阻塞引入
+import BLOG from '@/blog.config'
 import ExternalPlugins from '@/components/ExternalPlugins'
 import GlobalHead from '@/components/GlobalHead'
-import BLOG from '@/blog.config'
 
 /**
  * App挂载DOM 入口文件
@@ -27,11 +26,15 @@ import BLOG from '@/blog.config'
  */
 const MyApp = ({ Component, pageProps }) => {
   // 一些可能出现 bug 的样式，可以统一放入该钩子进行调整
-  useAdjustStyle();
+  useAdjustStyle()
 
   const route = useRouter()
   const queryParam = useMemo(() => {
-    return getQueryParam(route.asPath, 'theme') || pageProps?.NOTION_CONFIG?.THEME || BLOG.THEME
+    return (
+      getQueryParam(route.asPath, 'theme') ||
+      pageProps?.NOTION_CONFIG?.THEME ||
+      BLOG.THEME
+    )
   }, [route])
 
   // 整体布局
@@ -47,7 +50,7 @@ const MyApp = ({ Component, pageProps }) => {
   return (
     <GlobalContextProvider {...pageProps}>
       <GLayout {...pageProps}>
-        <GlobalHead {...pageProps}/>
+        <GlobalHead {...pageProps} />
         <Component {...pageProps} />
       </GLayout>
       <ExternalPlugins {...pageProps} />

styles/nprogress.css

@@ -1,84 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: #29d;
-
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-  display: block;
-  position: absolute;
-  right: 0px;
-  width: 100px;
-  height: 100%;
-  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
-  opacity: 1;
-
-  -webkit-transform: rotate(3deg) translate(0px, -4px);
-  -ms-transform: rotate(3deg) translate(0px, -4px);
-  transform: rotate(3deg) translate(0px, -4px);
-}
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
-  display: block;
-  position: fixed;
-  z-index: 1031;
-  top: 15px;
-  right: 15px;
-}
-
-#nprogress .spinner-icon {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-
-  border: solid 2px transparent;
-  border-top-color: #29d;
-  border-left-color: #29d;
-  border-radius: 50%;
-
-  -webkit-animation: nprogress-spinner 400ms linear infinite;
-  animation: nprogress-spinner 400ms linear infinite;
-}
-
-.nprogress-custom-parent {
-  overflow: hidden;
-  position: relative;
-}
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-  position: absolute;
-}
-
-@-webkit-keyframes nprogress-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes nprogress-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

yarn.lock

@@ -2918,11 +2918,6 @@ notion-utils@^6.15.6, notion-utils@^6.16.0:
     notion-types "^6.16.0"
     p-queue "^7.2.0"
 
-nprogress@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
-  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
-
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"