From 315290994466ebbeeb15badafeb1f900cdc7e04d Mon Sep 17 00:00:00 2001
From: Dipesh Kafle <dipesh.kaphle111@gmail.com>
Date: Thu, 14 Jan 2021 18:00:28 +0545
Subject: [PATCH 1/2] Added preloader animation and removed Sugar Component

---
 src/app/index.tsx     |   2 -
 src/assets/index.html | 135 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 133 insertions(+), 4 deletions(-)

diff --git a/src/app/index.tsx b/src/app/index.tsx
index efbe0d9e..31fc5310 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -11,7 +11,6 @@ import { initializeRendererAssets } from 'code-character-renderer-20';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
 // @ts-ignore
-import { Sugar } from 'react-preloaders';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
 initializeRendererAssets();
@@ -19,7 +18,6 @@ initializeRendererAssets();
 /* tslint:disable-next-line:variable-name */
 export const App = hot(module)(() => (
   <HashRouter>
-    <Sugar background="#484848" color="white" />
     <Switch>
       <Route exact path={Routes.ROOT} component={Dashboard} />
       <Route exact path={Routes.LOGIN} component={Login} />
diff --git a/src/assets/index.html b/src/assets/index.html
index 40331b55..85f102e6 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -9,9 +9,140 @@
       href="https://fonts.googleapis.com/css?family=Bebas+Neue|Lato&display=swap"
       rel="stylesheet"
     />
-    <title>Code Character</title>
+    <style>
+      #preloader-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 100000;
+        background-color: #fff;
+        transition: opacity 1s;
+      }
+      .container {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .item {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+      }
+
+      .item-1 {
+        background-color: #fa5667;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        animation: item-1_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      .item-2 {
+        background-color: #7a45e5;
+        top: 0;
+        right: 0;
+        animation: item-2_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      .item-3 {
+        background-color: #1b91f7;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+        animation: item-3_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      .item-4 {
+        background-color: #fac24c;
+        bottom: 0;
+        left: 0;
+        animation: item-4_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      @keyframes item-1_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(0, 100px);
+        }
+        50% {
+          transform: translate(100px, 100px);
+        }
+        75% {
+          transform: translate(100px, 0);
+        }
+      }
+
+      @keyframes item-2_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(-100px, 0);
+        }
+        50% {
+          transform: translate(-100px, 100px);
+        }
+        75% {
+          transform: translate(0, 100px);
+        }
+      }
+
+      @keyframes item-3_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(0, -100px);
+        }
+        50% {
+          transform: translate(-100px, -100px);
+        }
+        75% {
+          transform: translate(-100px, 0);
+        }
+      }
+
+      @keyframes item-4_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(100px, 0);
+        }
+        50% {
+          transform: translate(100px, -100px);
+        }
+        75% {
+          transform: translate(0, -100px);
+        }
+      }
+    </style>
+    <title>code character</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div id="preloader-container">
+        <div class="container">
+          <div class="item item-1"></div>
+          <div class="item item-2"></div>
+          <div class="item item-3"></div>
+          <div class="item item-4"></div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>

From edc5f867dc6b664929e43a2e520b61a5f8a7edf9 Mon Sep 17 00:00:00 2001
From: Dipesh Kafle <dipesh.kaphle111@gmail.com>
Date: Thu, 14 Jan 2021 18:35:37 +0545
Subject: [PATCH 2/2] Removed react-preloader from package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a69bb6f5..b4d64bb1 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,6 @@
     "react-monaco-editor": "^0.22.0",
     "react-paginate": "^6.2.1",
     "react-player": "^1.15.2",
-    "react-preloaders": "^3.0.3",
     "react-redux": "^5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "^5.1.2",
@@ -176,6 +175,7 @@
     "redux-saga": "^0.16.2",
     "socket.io-client": "^2.2.0",
     "sockjs-client": "^1.4.0",
+    "styled-components": "^5.2.1",
     "zlib": "^1.0.5"
   }
 }