Enhance code + Adding finally block to avoid duplicating code

Author: pH-7

src/pages/user/UsersList.jsx

@@ -1,9 +1,9 @@
-import Layout from "../../components/layout/Layout";
-import UserCard from "../../components/user/UserCard";
-import * as userService from "../../services/user.service";
-import React, { useEffect, useState } from "react";
-import { Col, Row } from "react-bootstrap";
-import { List } from "react-content-loader";
+import Layout from '../../components/layout/Layout';
+import UserCard from '../../components/user/UserCard';
+import * as userService from '../../services/user.service';
+import React, { useEffect, useState } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { List } from 'react-content-loader';
 
 const UsersList = () => {
   const [users, setUsers] = useState({}); // Important, default need to be empty object
@@ -16,17 +16,16 @@ const UsersList = () => {
 
       const users = await userService.retrieveAllUsers();
       setUsers(users);
-      setIsLoading(false);
     } catch (error) {
       const retrieveErrorMessage = () => {
         const apiErrorMessage = error?.response?.data?.message;
 
         // Null Coalescing Operator
-        return apiErrorMessage ?? "Error while connecting to the server";
+        return apiErrorMessage ?? 'Error while connecting to the server';
       };
-
-      setIsLoading(false); // Stop loader if we receive error msg
       setErrorMessage(retrieveErrorMessage());
+    } finally {
+      setIsLoading(false); // At this stage, we can stop the loader
     }
   };
 
@@ -37,17 +36,17 @@ const UsersList = () => {
   return (
     <Layout>
       {isLoading ? (
-        <div className="text-center">
+        <div className='text-center'>
           <List />
         </div>
       ) : errorMessage ? (
-        <h3 className="text-center text-danger fw-bold">{errorMessage}</h3>
+        <h3 className='text-center text-danger fw-bold'>{errorMessage}</h3>
       ) : (
         <>
-          <h4 className="text-center mb-3">Users</h4>
-          <Row className="justify-content-center">
+          <h4 className='text-center mb-3'>Users</h4>
+          <Row className='justify-content-center'>
             {Object.values(users).map((user) => (
-              <Col key={user.id} lg={4} className="p-1">
+              <Col key={user.id} lg={4} className='p-1'>
                 <UserCard user={user} />
               </Col>
             ))}