From cf6fd9aca80d6ec5c2c0ead1f4a74b0f8da2e024 Mon Sep 17 00:00:00 2001
From: Hadi Cheaito <38328371+hadicheaito1@users.noreply.github.com>
Date: Thu, 5 Jan 2023 16:23:30 -0500
Subject: [PATCH] Room Config Placeholders (#4415)

---
 .../admin/room_configuration/RoomConfig.jsx   | 113 ++++++++++--------
 .../RoomConfigPlaceHolder.jsx                 |  21 ++++
 2 files changed, 82 insertions(+), 52 deletions(-)
 create mode 100644 app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx

diff --git a/app/javascript/components/admin/room_configuration/RoomConfig.jsx b/app/javascript/components/admin/room_configuration/RoomConfig.jsx
index aa6b66e3..a8912511 100644
--- a/app/javascript/components/admin/room_configuration/RoomConfig.jsx
+++ b/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,56 +38,66 @@ export default function RoomConfig() {
                   <div className="p-4 border-bottom">
                     <h3> { t('admin.room_configuration.room_configuration') } </h3>
                   </div>
-                  <div className="p-4">
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.allow_room_to_be_recorded')}
-                      subtitle={t('admin.room_configuration.configurations.allow_room_to_be_recorded_description')}
-                      mutation={() => useUpdateRoomConfig('record')}
-                      value={roomConfigs?.record}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.require_user_signed_in')}
-                      subtitle={t('admin.room_configuration.configurations.require_user_signed_in_description')}
-                      mutation={() => useUpdateRoomConfig('glRequireAuthentication')}
-                      value={roomConfigs?.glRequireAuthentication}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.require_mod_approval')}
-                      subtitle={t('admin.room_configuration.configurations.require_mod_approval_description')}
-                      mutation={() => useUpdateRoomConfig('guestPolicy')}
-                      value={roomConfigs?.guestPolicy}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting')}
-                      subtitle={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting_description')}
-                      mutation={() => useUpdateRoomConfig('glAnyoneCanStart')}
-                      value={roomConfigs?.glAnyoneCanStart}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.allow_users_to_join_as_mods')}
-                      subtitle={t('admin.room_configuration.configurations.allow_users_to_join_as_mods_description')}
-                      mutation={() => useUpdateRoomConfig('glAnyoneJoinAsModerator')}
-                      value={roomConfigs?.glAnyoneJoinAsModerator}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.mute_users_on_join')}
-                      subtitle={t('admin.room_configuration.configurations.mute_users_on_join_description')}
-                      mutation={() => useUpdateRoomConfig('muteOnStart')}
-                      value={roomConfigs?.muteOnStart}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.viewer_access_code')}
-                      subtitle={t('admin.room_configuration.configurations.viewer_access_code_description')}
-                      mutation={() => useUpdateRoomConfig('glViewerAccessCode')}
-                      value={roomConfigs?.glViewerAccessCode}
-                    />
-                    <RoomConfigRow
-                      title={t('admin.room_configuration.configurations.mod_access_code')}
-                      subtitle={t('admin.room_configuration.configurations.mod_access_code_description')}
-                      mutation={() => useUpdateRoomConfig('glModeratorAccessCode')}
-                      value={roomConfigs?.glModeratorAccessCode}
-                    />
-                  </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')}
+                    subtitle={t('admin.room_configuration.configurations.allow_room_to_be_recorded_description')}
+                    mutation={() => useUpdateRoomConfig('record')}
+                    value={roomConfigs?.record}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.require_user_signed_in')}
+                    subtitle={t('admin.room_configuration.configurations.require_user_signed_in_description')}
+                    mutation={() => useUpdateRoomConfig('glRequireAuthentication')}
+                    value={roomConfigs?.glRequireAuthentication}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.require_mod_approval')}
+                    subtitle={t('admin.room_configuration.configurations.require_mod_approval_description')}
+                    mutation={() => useUpdateRoomConfig('guestPolicy')}
+                    value={roomConfigs?.guestPolicy}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting')}
+                    subtitle={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting_description')}
+                    mutation={() => useUpdateRoomConfig('glAnyoneCanStart')}
+                    value={roomConfigs?.glAnyoneCanStart}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.allow_users_to_join_as_mods')}
+                    subtitle={t('admin.room_configuration.configurations.allow_users_to_join_as_mods_description')}
+                    mutation={() => useUpdateRoomConfig('glAnyoneJoinAsModerator')}
+                    value={roomConfigs?.glAnyoneJoinAsModerator}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.mute_users_on_join')}
+                    subtitle={t('admin.room_configuration.configurations.mute_users_on_join_description')}
+                    mutation={() => useUpdateRoomConfig('muteOnStart')}
+                    value={roomConfigs?.muteOnStart}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.viewer_access_code')}
+                    subtitle={t('admin.room_configuration.configurations.viewer_access_code_description')}
+                    mutation={() => useUpdateRoomConfig('glViewerAccessCode')}
+                    value={roomConfigs?.glViewerAccessCode}
+                  />
+                  <RoomConfigRow
+                    title={t('admin.room_configuration.configurations.mod_access_code')}
+                    subtitle={t('admin.room_configuration.configurations.mod_access_code_description')}
+                    mutation={() => useUpdateRoomConfig('glModeratorAccessCode')}
+                    value={roomConfigs?.glModeratorAccessCode}
+                  />
+                </div>
+              )
+          }
                 </Container>
               </Tab.Content>
             </Col>
diff --git a/app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx b/app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx
new file mode 100644
index 00000000..18d6f4aa
--- /dev/null
+++ b/app/javascript/components/admin/room_configuration/RoomConfigPlaceHolder.jsx
@@ -0,0 +1,21 @@
+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>
+  );
+}
-- 
GitLab