Render PlaceHolders for Server Recordings (#4128)

Added PlaceHolders to the Server Recordings in the Admin Page

.eslintrc.yml

@@ -13,6 +13,7 @@ plugins:
   - react
 rules:
   react/jsx-one-expression-per-line: "off"
+  no-nested-ternary: "off"
   max-len:
     - 'error'
     - code: 150

app/javascript/components/admin/server_rooms/ServerRooms.jsx

@@ -12,6 +12,7 @@ import AdminNavSideBar from '../AdminNavSideBar';
 import Pagination from '../../shared_components/Pagination';
 import SortBy from '../../shared_components/search/SortBy';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
+import ServerRoomsRowPlaceHolder from './ServerRoomsRowPlaceHolder';
 
 export default function ServerRooms() {
   const { t } = useTranslation();
@@ -54,8 +55,17 @@ export default function ServerRooms() {
                           <th className="border-start-0" aria-label="options" />
                         </tr>
                       </thead>
+
                       <tbody className="border-top-0">
-                        {serverRooms?.data.length
+
+                        {
+                          isLoading
+                            ? (
+                              // eslint-disable-next-line react/no-array-index-key
+                              [...Array(10)].map((val, idx) => <ServerRoomsRowPlaceHolder key={idx} />)
+                            )
+                            : (
+                              serverRooms?.data.length
                                 ? (
                                   serverRooms?.data.map((room) => <ServerRoomRow key={room.friendly_id} room={room} />)
                                 )
@@ -65,7 +75,10 @@ export default function ServerRooms() {
                                       { t('room.no_rooms_found') }
                                     </td>
                                   </tr>
-                          )}
+                                )
+                            )
+                        }
+
                       </tbody>
                     </Table>
                     {!isLoading

app/javascript/components/admin/server_rooms/ServerRoomsRowPlaceHolder.jsx

+import React from 'react';
+import { Placeholder } from 'react-bootstrap';
+
+export default function ServerRoomsRowPlaceHolder() {
+  return (
+    <tr>
+      <td>
+        <Placeholder className="ps-0" animation="glow">
+          <Placeholder xs={8} size="md" className="me-2" />
+        </Placeholder>
+        <Placeholder className="ps-0" animation="glow">
+          <Placeholder xs={10} size="md" className="me-2" />
+        </Placeholder>
+      </td>
+      <td>
+        <Placeholder className="ps-0" animation="glow">
+          <Placeholder xs={6} size="md" className="me-2" />
+        </Placeholder>
+      </td>
+      <td>
+        <Placeholder className="ps-0" animation="glow">
+          <Placeholder xs={6} size="md" className="me-2" />
+        </Placeholder>
+      </td>
+      <td>
+        <Placeholder className="ps-0" animation="glow">
+          <Placeholder xs={6} size="md" className="me-2" />
+        </Placeholder>
+      </td>
+      <td>
+        <Placeholder className="ps-0" animation="glow">
+          <Placeholder xs={6} size="md" className="me-2" />
+        </Placeholder>
+      </td>
+    </tr>
+  );
+}