From 91f972713e38abfe1e6f1220f056c2b6cfcb462c Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 31 Jan 2022 09:08:27 +0100
Subject: [PATCH] Add loader to splash screen

---
 apps/remix-ide/src/index.css | 22 ++++++++++++++++++++++
 apps/remix-ide/src/index.tsx |  6 ++++++
 2 files changed, 28 insertions(+)
 create mode 100644 apps/remix-ide/src/index.css

diff --git a/apps/remix-ide/src/index.css b/apps/remix-ide/src/index.css
new file mode 100644
index 0000000000..8396f022e7
--- /dev/null
+++ b/apps/remix-ide/src/index.css
@@ -0,0 +1,22 @@
+.centered {
+  position           : fixed;
+  top                : 20%;
+  left               : 45%;
+  width              : 200px;
+  height             : 200px;
+}
+.centered svg path {
+  fill: var(--secondary);
+}
+.centered svg polygon {
+  fill              : var(--secondary);
+}
+.splash {
+  text-align: center;
+}
+.version {
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: normal;
+  max-width: 300px;
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/index.tsx b/apps/remix-ide/src/index.tsx
index ff690d4c5e..7872d12b77 100644
--- a/apps/remix-ide/src/index.tsx
+++ b/apps/remix-ide/src/index.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { render } from 'react-dom'
 // eslint-disable-next-line no-unused-vars
 import { RemixApp } from '@remix-ui/app'
+import * as packageJson from '../../../package.json'
+import './index.css'
 
 (function () {
   render(
@@ -15,6 +17,9 @@ import { RemixApp } from '@remix-ui/app'
           </svg>
           <div className="info-secondary splash">
             REMIX IDE
+            <div>
+              <span className='version'>v{ packageJson.version }</span> <i className="far fa-spinner-third fa-spin fa-sm"></i>
+            </div>
           </div>
         </div>
     </React.StrictMode>,
@@ -35,3 +40,4 @@ import ('./app').then((AppComponent) => {
 }).catch(err => {
   console.log('Error on loading Remix:', err)
 })
+