From cd38495dde48b8554235c8204736fc6050721656 Mon Sep 17 00:00:00 2001
From: Ismael Dosil <ismaeldosil@gmail.com>
Date: Mon, 26 Jan 2026 15:35:43 -0300
Subject: [PATCH] feat(all-users): add loading state with CHALK logo animation

Closes CHALK-085
---
 src/views/protected/UsersViews/UsersPage.tsx | 27 +++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/views/protected/UsersViews/UsersPage.tsx b/src/views/protected/UsersViews/UsersPage.tsx
index 35476993c..df0dfd56f 100644
--- a/src/views/protected/UsersViews/UsersPage.tsx
+++ b/src/views/protected/UsersViews/UsersPage.tsx
@@ -18,6 +18,7 @@ import Skeleton from "./Skeleton"
 import Archives from "../../../components/UsersComponents/Archives";
 import Sites from "../../../components/UsersComponents/Sites";
 import AllUsersTable from "../../../components/UsersComponents/AllUsersTable";
+import CHALKLogoGIF from '../../../assets/images/CHALKLogoGIF.gif';
 
 
 const styles: object = {
@@ -648,13 +649,25 @@ class UsersPage extends React.Component<Props, State> {
                     <Route path="/LeadersUsers" component={Skeleton} />
                     <Route path="/LeadersAllUsers" render={() =>
                       userRole === 'admin' ? (
-                        <div style={{ padding: '30px 30px 40px 30px' }}>
-                          <AllUsersTable
-                            users={this.state.allUsers}
-                            onUserClick={this.handleAllUserClick}
-                            onArchiveClick={this.handleAllUserArchive}
-                          />
-                        </div>
+                        this.state.allUsersLoading ? (
+                          <Grid
+                            container
+                            direction="row"
+                            justify="center"
+                            alignItems="center"
+                            style={{ height: '50vh' }}
+                          >
+                            <img src={CHALKLogoGIF} alt="Loading" width="40%" />
+                          </Grid>
+                        ) : (
+                          <div style={{ padding: '30px 30px 40px 30px' }}>
+                            <AllUsersTable
+                              users={this.state.allUsers}
+                              onUserClick={this.handleAllUserClick}
+                              onArchiveClick={this.handleAllUserArchive}
+                            />
+                          </div>
+                        )
                       ) : (
                         <div style={{ padding: '2em' }}>You must be an admin to access this page.</div>
                       )