feat(loading): Added loading screen

2026-09-22 17:22:05 -07:00 · 2020-10-21 23:43:23 -04:00
parent f6edd49546
commit 7786d90902
3 changed files with 44 additions and 6 deletions
@@ -147,6 +147,15 @@ class AdminLTEPage extends React.Component {
    }
  }

+  hideSplashLoader () {
+    try {
+      const loader = document.getElementById('___loader')
+      loader.className = 'display-none'
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
  async componentDidMount () {
    _this.customMenuItems()
    // _this.addOnClickEventToScanner()
@@ -158,6 +167,8 @@ class AdminLTEPage extends React.Component {
      _this.dropDownBalance()

      _this.handleGetBalance()
+
+      _this.hideSplashLoader()
    }, 250)
  }

@@ -327,7 +338,7 @@ class AdminLTEPage extends React.Component {
          return ''
        })
      )
-    } catch (err) {}
+    } catch (err) { }
  }

  getInvisibleMenuItem () {
@@ -740,4 +740,7 @@ pre tt:after {
 }
 .background-none{
  background: none!important;
+}
+.display-none{
+  display: none!important;
 }
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 // import { withPrefix, Link } from 'gatsby'

 // window && typeof window !== 'undefined' && window.test = 'testing'
+import Logo from './images/loader.gif'

 export default function HTML (props) {
  return (
@@ -22,11 +23,34 @@ export default function HTML (props) {
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
-        <div
-          key='body'
-          id='___gatsby'
-          dangerouslySetInnerHTML={{ __html: props.body }}
-        />
+        <div>
+          <div
+            key='body'
+            id='___gatsby'
+            dangerouslySetInnerHTML={{ __html: props.body }}
+          />
+          <div
+            className='test'
+            key='loader'
+            id='___loader'
+            style={{
+              alignItems: 'center',
+              backgroundColor: '#F2F2F2',
+              display: 'flex',
+              justifyContent: 'center',
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 9000,
+              flexDirection: 'column'
+            }}
+          ><img src={Logo} alt='' width='250' />
+          Loading...
+          </div>
+        </div>
+
        {props.postBodyComponents}
      </body>
    </html>