add: add react-spinner

- use react-spinner pkg to show loading spinner until bot   will reply

client/package-lock.json

@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "react-spinners": "^0.13.7",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14249,6 +14250,15 @@
         }
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.7.tgz",
+      "integrity": "sha512-mRamn56bfxWbGcacif5RT3UbeJaXi2AttjtPwSmomuv2IcxjpbfETCzdTvaQpNDk0E33ENJsStsQeKAZFuJcpA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27049,6 +27059,12 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-spinners": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.7.tgz",
+      "integrity": "sha512-mRamn56bfxWbGcacif5RT3UbeJaXi2AttjtPwSmomuv2IcxjpbfETCzdTvaQpNDk0E33ENJsStsQeKAZFuJcpA==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

client/package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/src/App.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import Avatar from "./components/Avatar";
 import NewChat from "./components/NewChat";
 import NavPrompt from "./components/NavPrompt";
+import Loading from "./components/Loading";
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
@@ -130,7 +131,11 @@ function App() {
                         />
                       </svg>
                     </Avatar>
-                    <div id="botMessage">{chat.botMessage}</div>
+                    {chat.botMessage ? (
+                      <div id="botMessage">{chat.botMessage}</div>
+                    ) : (
+                      <Loading />
+                    )}
                   </div>
                 </div>
               </div>

client/src/components/Loading.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import PulseLoader from "react-spinners/PulseLoader";
+
+const Loading = () => {
+  const override = {
+    color: "#fff",
+    loading: true,
+  };
+
+  return (
+    <div>
+      <PulseLoader
+        color={override.color}
+        loading={override.loading}
+        cssOverride={override}
+        size={5}
+        aria-label="Loading Spinner"
+        data-testid="loader"
+      />
+    </div>
+  );
+};
+
+export default Loading;