Added determinent loading animation when navigating

Author: Jovert Lota Palonpon

resources/js/ui/Loaders/LinearDeterminate.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { LinearProgress, withStyles } from '@material-ui/core';
+
+class LinearDeterminate extends Component {
+    state = {
+        completed: 0,
+    };
+
+    componentDidMount() {
+        this.timer = setInterval(this.progress, 500);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.timer);
+    }
+
+    progress = () => {
+        const { completed } = this.state;
+
+        if (completed === 100) {
+            this.setState({ completed: 0 });
+
+            return;
+        }
+
+        const diff = Math.random() * 10;
+
+        this.setState({ completed: Math.min(completed + diff, 100) });
+    };
+
+    render() {
+        const { classes } = this.props;
+        const { completed } = this.state;
+
+        return (
+            <div className={classes.root}>
+                <LinearProgress
+                    variant="determinate"
+                    value={completed}
+                    {...this.props}
+                />
+            </div>
+        );
+    }
+}
+
+LinearDeterminate.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const styles = {
+    root: {
+        flexGrow: 1,
+    },
+};
+
+export default withStyles(styles)(LinearDeterminate);

resources/js/ui/Loaders/index.js

@@ -0,0 +1 @@
+export { default as LinearDeterminate } from './LinearDeterminate';

resources/js/views/__backoffice/layouts/Master.js

@@ -11,6 +11,7 @@ import {
 } from '@material-ui/core';
 
 import { Snackbar, Modal } from '../../../ui';
+import { LinearDeterminate } from '../../../ui/Loaders';
 import { Header, Sidebar } from '../partials';
 
 class Master extends Component {
@@ -60,6 +61,7 @@ class Master extends Component {
             message,
             alert,
         } = this.props;
+        const { navigating } = pageProps;
 
         const { mobileOpen } = this.state;
 
@@ -78,6 +80,8 @@ class Master extends Component {
 
         return (
             <>
+                {navigating && <LinearDeterminate className={classes.loader} />}
+
                 <div className={classes.root}>
                     <CssBaseline />
 
@@ -163,6 +167,10 @@ Master.propTypes = {
 const drawerWidth = 256;
 
 const styles = theme => ({
+    loader: {
+        zIndex: 9999,
+    },
+
     root: {
         display: 'flex',
         position: 'relative',