Skip to content

Commit

Permalink
feat: showing progress while page is being loaded (#485)
Browse files Browse the repository at this point in the history
  • Loading branch information
dakshesh14 authored Mar 22, 2023
1 parent a830808 commit e48d98c
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 0 deletions.
2 changes: 2 additions & 0 deletions apps/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"lodash.debounce": "^4.0.8",
"next": "12.3.2",
"next-pwa": "^5.6.0",
"nprogress": "^0.2.0",
"react": "18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-color": "^2.19.3",
Expand All @@ -40,6 +41,7 @@
"devDependencies": {
"@types/js-cookie": "^3.0.2",
"@types/node": "18.0.6",
"@types/nprogress": "^0.2.0",
"@types/react": "18.0.15",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-color": "^3.0.6",
Expand Down
14 changes: 14 additions & 0 deletions apps/app/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
// styles
import "styles/globals.css";
import "styles/editor.css";
import "styles/nprogress.css";

// router
import Router from "next/router";

// nprogress
import NProgress from "nprogress";

// contexts
import { UserProvider } from "contexts/user.context";
import { ToastContextProvider } from "contexts/toast.context";
import { ThemeContextProvider } from "contexts/theme.context";
// types
import type { AppProps } from "next/app";

// nprogress
NProgress.configure({ showSpinner: false });
Router.events.on("routeChangeStart", NProgress.start);
Router.events.on("routeChangeError", NProgress.done);
Router.events.on("routeChangeComplete", NProgress.done);

function MyApp({ Component, pageProps }: AppProps) {
return (
<UserProvider>
Expand Down
39 changes: 39 additions & 0 deletions apps/app/styles/nprogress.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
#nprogress {
pointer-events: none;
}

#nprogress .bar {
background: #3f76ff;

position: fixed;
z-index: 1031;
top: 0;
left: 0;

width: 100%;
height: 0.2rem;
}

/* for blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #3f76ff, 0 0 5px #3f76ff;
opacity: 1;

-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}

.nprogress-custom-parent {
overflow: hidden;
position: relative;
}

.nprogress-custom-parent #nprogress .bar {
position: absolute;
}

1 comment on commit e48d98c

@vercel
Copy link

@vercel vercel bot commented on e48d98c Mar 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

Please sign in to comment.