Add nprogress'

Author: imranhsayed

package-lock.json

@@ -20,6 +20,7 @@
     "next": "^12.3.0",
     "next-seo": "^5.15.0",
     "next-stripe": "^1.0.0-beta.9",
+    "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -1,4 +1,12 @@
-import '../src/styles/index.scss'
+import '../src/styles/index.scss';
+
+import Router from 'next/router';
+import NProgress from 'nprogress';
+
+NProgress.configure( { showSpinner: false } );
+Router.events.on( 'routeChangeStart', () => NProgress.start() );
+Router.events.on( 'routeChangeComplete', () => NProgress.done() );
+Router.events.on( 'routeChangeError', () => NProgress.done() );
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/_app.js

@@ -19,12 +19,11 @@ import { getPosts } from '../../src/utils/blog';
  * @param {Object} postsData Post Data.
  */
 const Blog = ( { headerFooter, postsData } ) => {
-	console.log( 'postsData', postsData );
 	return (
-		<Layout headerFooter={ headerFooter || {} } seo={null}>
+		<Layout headerFooter={ headerFooter || {} } seo={ null }>
 			<h1>Blog</h1>
-			<Posts posts={postsData?.posts_data ?? []}/>
-			<Pagination pagesCount={postsData?.page_count} postName="blog" />
+			<Posts posts={ postsData?.posts_data ?? [] }/>
+			<Pagination pagesCount={ postsData?.page_count } postName="blog"/>
 		</Layout>
 	);
 };
@@ -38,7 +37,7 @@ export async function getStaticProps() {
 	return {
 		props: {
 			headerFooter: headerFooterData?.data ?? {},
-			postsData: postsData || {}
+			postsData: postsData || {},
 		},
 
 		/**

pages/blog/index.js

@@ -18,8 +18,6 @@ import Pagination from '../../../src/components/pagination';
 const Page = ( { headerFooter, postsData } ) => {
 	const router = useRouter();
 
-	console.log( 'postsData', postsData );
-	
 	// Redirecting to /blog if we are on page 1
 	const pageNo = router?.query?.pageNo ?? 1;
 

pages/blog/page/[pageNo].js

@@ -0,0 +1,6 @@
+// NProgress style.
+@import 'nprogress/nprogress.css';
+
+#nprogress .bar {
+	background-color: #fff;
+}

src/styles/04-libraries/_nprogress.scss

@@ -10,3 +10,6 @@
 
 // Image Gallery Styles.
 @import "~react-image-gallery/styles/scss/image-gallery.scss";
+
+// NProgress Styles.
+@import "04-libraries/nprogress";

src/styles/index.scss

@@ -1629,6 +1629,11 @@
   "resolved" "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   "version" "0.1.2"
 
+"nprogress@^0.2.0":
+  "integrity" "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+  "resolved" "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz"
+  "version" "0.2.0"
+
 "nth-check@^1.0.2":
   "integrity" "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg=="
   "resolved" "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz"