diff --git a/src/Pages/AdminArea/Roles/index.js b/src/Pages/AdminArea/Roles/index.js
index dbc0d99..5945627 100644
--- a/src/Pages/AdminArea/Roles/index.js
+++ b/src/Pages/AdminArea/Roles/index.js
@@ -6,6 +6,7 @@ import {
   Input,
   Popconfirm,
   Space,
+  Spin,
   Tag,
   Tooltip,
   Tree,
@@ -45,6 +46,7 @@ export default function AdminAreaRoles() {
   const adminAreaRolesContext = useAdminAreaRolesContext();
   const [notificationApi, notificationContextHolder] =
     notification.useNotification();
+  const [isLoading, setIsLoading] = useState(true);
 
   function createTreeDataList(permissions) {
     const result = [];
@@ -123,12 +125,17 @@ export default function AdminAreaRoles() {
   );
 
   useEffect(() => {
-    const rolesRequest = () =>
+    const rolesRequest = () => {
+      setIsLoading(true);
+
       myFetch("/adminarea/roles", "GET").then((data) => {
         adminAreaRolesContext.setRoles(data.Roles);
         adminAreaRolesContext.setRolesPermissions(data.RolesPermissions);
         adminAreaRolesContext.setUsers(data.Users);
+
+        setIsLoading(false);
       });
+    };
 
     rolesRequest();
 
@@ -143,6 +150,24 @@ export default function AdminAreaRoles() {
       );
   }, []);
 
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "center",
+          alignContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          height: "98.3vh",
+        }}
+      >
+        <Spin size="large" />
+      </div>
+    );
+  }
+
   return (
     <Space direction="vertical" style={{ width: "100%" }}>
       {notificationContextHolder}