From a8172d14c4c63a2c47cafcb9f6aff47c93f3d4a4 Mon Sep 17 00:00:00 2001
From: DevEmmy <eolaosebikan60@gmail.com>
Date: Sun, 27 Mar 2022 07:21:40 -0500
Subject: [PATCH 1/3] changed the loading message and added a component and its
 style

---
 src/constants/Loader.css  | 54 +++++++++++++++++++++++++++++++++++++++
 src/constants/Loader.jsx  | 10 ++++++++
 src/constants/messages.js |  4 ++-
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/Loader.css
 create mode 100644 src/constants/Loader.jsx

diff --git a/src/constants/Loader.css b/src/constants/Loader.css
new file mode 100644
index 000000000..a5c77a2e5
--- /dev/null
+++ b/src/constants/Loader.css
@@ -0,0 +1,54 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 3px solid;
+    border-color: #FFF #FFF transparent transparent;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+  .loader::after,
+  .loader::before {
+    content: '';  
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border: 3px solid;
+    border-color: transparent transparent #FF3D00 #FF3D00;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: rotationBack 0.5s linear infinite;
+    transform-origin: center center;
+  }
+  .loader::before {
+    width: 32px;
+    height: 32px;
+    border-color: #FFF #FFF transparent transparent;
+    animation: rotation 1.5s linear infinite;
+  }
+      
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  } 
+  @keyframes rotationBack {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+      
\ No newline at end of file
diff --git a/src/constants/Loader.jsx b/src/constants/Loader.jsx
new file mode 100644
index 000000000..c7ced4620
--- /dev/null
+++ b/src/constants/Loader.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import './Loader.css'
+
+function Loader() {
+  return (
+    <span class="loader"></span>
+  )
+}
+
+export default Loader
\ No newline at end of file
diff --git a/src/constants/messages.js b/src/constants/messages.js
index 4a145bb34..a5966e3aa 100644
--- a/src/constants/messages.js
+++ b/src/constants/messages.js
@@ -16,6 +16,8 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import Loader from "./Loader";
+
 const messages = {
   forbiddenResource: "Requested resource is forbidden",
   noGroup: "No Group Found",
@@ -26,7 +28,7 @@ const messages = {
   groupCreate: "Successfully created the group",
   deletedUser: "Successfully deleted the user",
   confirmDeletion: "Deletion not confirmed",
-  loading: "Loading...",
+  loading: <Loader />,
   jobsAdded: "Your jobs have been added to job queue",
   createdFolder: "Successfully created the folder",
   deletedFolder: "Successfully deleted the folder",

From 6fa2a42735412e7ec1e264bca8ead3df621c90d2 Mon Sep 17 00:00:00 2001
From: Emmanuel Olaosebikan <eolaosebikan60@gmail.com>
Date: Mon, 28 Mar 2022 14:36:26 +0100
Subject: [PATCH 2/3] Updated messages.js

---
 src/constants/messages.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/messages.js b/src/constants/messages.js
index a5966e3aa..ed5a39d55 100644
--- a/src/constants/messages.js
+++ b/src/constants/messages.js
@@ -28,7 +28,7 @@ const messages = {
   groupCreate: "Successfully created the group",
   deletedUser: "Successfully deleted the user",
   confirmDeletion: "Deletion not confirmed",
-  loading: <Loader />,
+  loading: `${<Loader />}`,
   jobsAdded: "Your jobs have been added to job queue",
   createdFolder: "Successfully created the folder",
   deletedFolder: "Successfully deleted the folder",

From b94f97c627092594c3e7893b94c1abc4321c9728 Mon Sep 17 00:00:00 2001
From: DevEmmy <eolaosebikan60@gmail.com>
Date: Mon, 28 Mar 2022 08:48:33 -0500
Subject: [PATCH 3/3] Resolved Loader Component Issue

---
 src/constants/{Loader.jsx => Loader.js} | 0
 src/constants/messages.js               | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/constants/{Loader.jsx => Loader.js} (100%)

diff --git a/src/constants/Loader.jsx b/src/constants/Loader.js
similarity index 100%
rename from src/constants/Loader.jsx
rename to src/constants/Loader.js
diff --git a/src/constants/messages.js b/src/constants/messages.js
index ed5a39d55..4171a4246 100644
--- a/src/constants/messages.js
+++ b/src/constants/messages.js
@@ -15,7 +15,7 @@
  with this program; if not, write to the Free Software Foundation, Inc.,
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
-
+import React from 'react'
 import Loader from "./Loader";
 
 const messages = {