Roles placeholders (#4420)

app/javascript/components/admin/roles/EditRolePlaceHolder.jsx

+import React from 'react';
+import {
+  Col, Row,
+} from 'react-bootstrap';
+import Placeholder from '../../shared_components/utilities/Placeholder';
+
+export default function EditRolePlaceHolder() {
+  return (
+    <Row className="py-3 d-flex">
+      <Col>
+        <Placeholder width={8} size="md" className="me-2" />
+      </Col>
+      <Col md="1">
+        <Placeholder width={5} size="md" className="me-2" />
+      </Col>
+    </Row>
+  );
+}

app/javascript/components/admin/roles/RolesList.jsx

@@ -4,7 +4,7 @@ import { Table } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import RoleRow from './RoleRow';
 import SortBy from '../../shared_components/search/SortBy';
-import Spinner from '../../shared_components/utilities/Spinner';
+import RolesListPlaceHolder from './RolesListPlaceHolder';
 
 export default function RolesList({ roles, isLoading }) {
   const { t } = useTranslation();
@@ -21,8 +21,10 @@ export default function RolesList({ roles, isLoading }) {
           (isLoading && (
             <tr>
               <td>
-                {/* TODO ADD PLACEHOLDER HERE */}
-                <Spinner />
+                {
+                  // eslint-disable-next-line react/no-array-index-key
+                  [...Array(5)].map((val, idx) => <RolesListPlaceHolder key={idx} />)
+                }
               </td>
             </tr>
           )) || (

app/javascript/components/admin/roles/RolesListPlaceHolder.jsx

+import React from 'react';
+import {
+  Col, Row,
+} from 'react-bootstrap';
+import Placeholder from '../../shared_components/utilities/Placeholder';
+
+export default function RolesListPlaceHolder() {
+  return (
+    <Row className="align-middle border border-2 cursor-pointer">
+      <Col className="py-4">
+        <Placeholder width={5} size="md" className="me-2" />
+      </Col>
+    </Row>
+  );
+}

app/javascript/components/admin/roles/forms/EditRoleForm.jsx

@@ -17,6 +17,7 @@ import useRoomConfigs from '../../../../hooks/queries/rooms/useRoomConfigs';
 import useRolePermissions from '../../../../hooks/queries/admin/role_permissions/useRolePermissions';
 import RolePermissionRow from '../RolePermissionRow';
 import { useAuth } from '../../../../contexts/auth/AuthProvider';
+import EditRolePlaceHolder from '../EditRolePlaceHolder';
 
 export default function EditRoleForm({ role }) {
   const { t } = useTranslation();
@@ -60,10 +61,16 @@ export default function EditRoleForm({ role }) {
 
   fieldsRoomLimit.value.placeHolder = rolePermissions?.RoomLimit;
 
-  if (roomConfigs.isLoading || isLoading) return null;
-
   return (
     <div id="edit-role-form">
+      {
+      roomConfigs.isLoading || isLoading
+        ? (
+          // eslint-disable-next-line react/no-array-index-key
+          [...Array(9)].map((val, idx) => <EditRolePlaceHolder key={idx} />)
+        )
+        : (
+          <div>
             <Form methods={methodsRoleName} onBlur={(e) => updateRoleAPI.mutate({ name: e.target.value })}>
               <FormControl field={fieldsRoleName.name} type="text" />
             </Form>
@@ -139,6 +146,9 @@ export default function EditRoleForm({ role }) {
                 </div>
               </Stack>
             </Form>
+          </div>
+        )
+}
 
       {
         deleteRoleButton()

app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx

@@ -7,13 +7,13 @@ import Placeholder from '../../shared_components/utilities/Placeholder';
 export default function RoomConfigPlaceHolder() {
   return (
     <Row className="mb-4">
-      <Col md="9">
+      <Col>
         <Stack>
           <Placeholder width={8} size="md" className="me-2" />
           <Placeholder width={8} size="lg" className="me-2" />
         </Stack>
       </Col>
-      <Col md="3">
+      <Col md="2">
         <Placeholder width={5} size="md" className="me-2" />
       </Col>
     </Row>