Merge pull request #94 from Permissionless-Software-Foundation/ct-unstable

fix(loading gif): Loading gif displayed much sooner

src/html.js

@@ -3,7 +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'
+// import Logo from './images/loader.gif'
 
 export default function HTML (props) {
   return (
@@ -16,6 +16,28 @@ export default function HTML (props) {
           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' />
 
@@ -29,26 +51,6 @@ export default function HTML (props) {
             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}