Adding new spinny gif loading screen

2026-09-22 01:02:06 -07:00 · 2020-11-06 12:34:46 -08:00
parent 86b6a91e94
commit 21fccd8747
1 changed files with 31 additions and 8 deletions
@@ -8,26 +8,49 @@ export default function HTML (props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
-        <meta charSet='utf-8' />
-        <meta httpEquiv='x-ua-compatible' content='ie=edge' />
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
-          name='viewport'
-          content='width=device-width, initial-scale=1, shrink-to-fit=no'
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

+        {/* Loading animation should be loaded very first thing. */}
+        <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="https://i.imgur.com/8n8PYAi.gif" alt="" width="250" />
+          Loading...
+        </div>
+
        {/* minimal-slp-wallet-web */}
-        <script src='https://unpkg.com/minimal-slp-wallet-web' />
+        <script src="https://unpkg.com/minimal-slp-wallet-web" />

        {/* bch-token-sweep */}
-        <script src='https://unpkg.com/bch-token-sweep' />
+        <script src="https://unpkg.com/bch-token-sweep" />

        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
-          key='body'
-          id='___gatsby'
+          key="body"
+          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}