Merge pull request #13 from Permissionless-Software-Foundation/dh-loading-spinner

feat(spinner): Added a spinner gif splash page
2026-09-21 16:52:06 -07:00 · 2020-06-25 18:33:32 -07:00
parent 9c17bdf1a9 2509ea79bf
commit bc74b76cd8
2 changed files with 66 additions and 0 deletions
@@ -0,0 +1,66 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Loader from "./images/loader.gif" //https://loading.io/
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <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"
+        />
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <div
+          key={`loader`}
+          id="___loader"
+          style={{
+            alignItems: "center",
+            backgroundColor: "white",
+            display: "flex",
+            justifyContent: "center",
+            position: "absolute",
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 9000,
+            flexDirection:'column'
+          }}
+        >
+          <img src={Loader} alt="" width="150" />
+          <span>Loading...</span>
+        </div>
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+                setTimeout(function() {
+                    document.getElementById("___loader").style.display = "none"
+                }, 1500)
+            `,
+          }}
+        />
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}