Room Config Placeholders (#4415)

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

@@ -10,6 +10,7 @@ import RoomConfigRow from './RoomConfigRow';
 import useUpdateRoomConfig from '../../../hooks/mutations/admin/room_configuration/useUpdateRoomConfig';
 import useRoomConfigs from '../../../hooks/queries/rooms/useRoomConfigs';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
+import RoomConfigPlaceHolder from './RoomConfigPlaceHolder';
 
 export default function RoomConfig() {
   const { t } = useTranslation();
@@ -20,8 +21,6 @@ export default function RoomConfig() {
     return <Navigate to="/404" />;
   }
 
-  if (isLoading) return null;
-
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
@@ -39,6 +38,14 @@ export default function RoomConfig() {
                   <div className="p-4 border-bottom">
                     <h3> { t('admin.room_configuration.room_configuration') } </h3>
                   </div>
+
+                  {
+            isLoading
+              ? (
+                // eslint-disable-next-line react/no-array-index-key
+                [...Array(8)].map((val, idx) => <RoomConfigPlaceHolder key={idx} />)
+              )
+              : (
                 <div className="p-4">
                   <RoomConfigRow
                     title={t('admin.room_configuration.configurations.allow_room_to_be_recorded')}
@@ -89,6 +96,8 @@ export default function RoomConfig() {
                     value={roomConfigs?.glModeratorAccessCode}
                   />
                 </div>
+              )
+          }
                 </Container>
               </Tab.Content>
             </Col>

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

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