Add Spinner Content when loading the page

pH-7 · pH-7 · commit c5c81f59ee1f · 2022-07-23T21:32:17.000+09:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "bootstrap": "^5.1.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
+    "react-content-loader": "^6.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Simple Client</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/pages/user/UsersList.jsx b/src/pages/user/UsersList.jsx
@@ -2,16 +2,21 @@ import Layout from "../../components/layout/Layout";
 import * as userService from "../../services/user.service";
 import React, { useEffect, useState } from "react";
 import { Button, Card, Col, Row } from "react-bootstrap";
+import { List } from "react-content-loader";
 import { NavLink } from "react-router-dom";
 
 const UsersList = () => {
   const [users, setUsers] = useState({}); // Important, default need to be empty object
   const [errorMessage, setErrorMessage] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   const fetchUsers = async () => {
     try {
+      setIsLoading(true);
+
       const users = await userService.retrieveAllUsers();
       setUsers(users);
+      setIsLoading(false);
     } catch (error) {
       const retrieveErrorMessage = () => {
         const apiErrorMessage = error?.response?.data?.message;
@@ -29,7 +34,11 @@ const UsersList = () => {
 
   return (
     <Layout>
-      {errorMessage ? (
+      {isLoading ? (
+        <div className="text-center">
+          <List />
+        </div>
+      ) : errorMessage ? (
         <h3 className="text-center text-danger fw-bold">{errorMessage}</h3>
       ) : (
         <>
