From 2e2b1c6f187278875747348d399e69515c629f93 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 27 Oct 2021 19:00:31 +0530
Subject: [PATCH] Added variety of msg on loading app

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/templates/client/Client.jsx  | 18 +++++++++++++++++-
 src/app/templates/client/Client.scss |  2 ++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index 145aaca..05bd43f 100644
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -15,9 +15,25 @@ import initMatrix from '../../../client/initMatrix';
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
+  const [loadingMsg, setLoadingMsg] = useState('Heating up');
 
   useEffect(() => {
+    let counter = 0;
+    const iId = setInterval(() => {
+      const msgList = [
+        'Sometimes it takes a while...',
+        'Looks like you have a lot of stuff to heat up!',
+      ];
+      if (counter === msgList.length - 1) {
+        setLoadingMsg(msgList[msgList.length - 1]);
+        clearInterval(iId);
+        return;
+      }
+      setLoadingMsg(msgList[counter]);
+      counter += 1;
+    }, 9000);
     initMatrix.once('init_loading_finished', () => {
+      clearInterval(iId);
       changeLoading(false);
     });
     initMatrix.init();
@@ -30,7 +46,7 @@ function Client() {
           <Text variant="b3">Logout</Text>
         </button>
         <Spinner />
-        <Text className="loading__message" variant="b2">Heating up</Text>
+        <Text className="loading__message" variant="b2">{loadingMsg}</Text>
 
         <div className="loading__appname">
           <Text variant="h2">Cinny</Text>
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss
index a94312c..8372302 100644
--- a/src/app/templates/client/Client.scss
+++ b/src/app/templates/client/Client.scss
@@ -27,6 +27,8 @@
 }
 .loading__message {
   margin-top: var(--sp-normal);
+  max-width: 350px;
+  text-align: center;
 }
 .loading__appname {
   position: absolute;