Fix RoomCard placeholder (#4118)

app/javascript/components/rooms/RoomPlaceHolder.jsx → app/javascript/components/rooms/RoomCardPlaceHolder.jsx

 import React from 'react';
 import { Card, Placeholder } from 'react-bootstrap';
 
-export default function RoomPlaceHolder() {
+export default function RoomCardPlaceHolder() {
   return (
-    <Card className="rooms-placeholder" style={{ height: '19rem', overflow: 'hidden' }} border="light">
-      <Card.Body style={{ maxHeight: '12rem', overflow: 'hidden' }} className="room-placeholder-top pb-0">
-        <Placeholder as={Card.Title} animation="glow">
-          <Placeholder xs={12} size="sm" />
+    <Card id="room-card" border="light">
+      <Card.Body>
+        <Placeholder as={Card.Title} animation="glow" className="mb-3">
+          <Placeholder style={{ height: '65px', width: '65px' }} />
         </Placeholder>
-        <Placeholder as={Card.Text} animation="glow">
-          <Placeholder xs={7} size="xs" /> <Placeholder xs={4} size="xs" /> <Placeholder xs={3} size="xs" />
+        <Placeholder as={Card.Title} animation="glow">
+          <Placeholder xs={5} size="sm" />
         </Placeholder>
-      </Card.Body>
-      <Card.Body style={{ maxHeight: '7rem', overflow: 'hidden' }} className="pt-0">
         <Placeholder as={Card.Text} animation="glow">
-          <Placeholder xs={3} size="xs" /> <Placeholder xs={2} size="xs" />
+          <Placeholder xs={4} size="xs" /> <Placeholder xs={6} size="xs" />
+          <Placeholder xs={2} size="xs" />
         </Placeholder>
         <hr />
-        <Placeholder.Button variant="outline-secondary" className="float-end" animation="glow"> Start</Placeholder.Button>
+        <Placeholder.Button variant="brand-outline" className="float-end" animation="glow"> Start</Placeholder.Button>
       </Card.Body>
     </Card>
   );

app/javascript/components/rooms/RoomsList.jsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import RoomCard from './RoomCard';
 import useRooms from '../../hooks/queries/rooms/useRooms';
 import useCreateRoom from '../../hooks/mutations/rooms/useCreateRoom';
-import RoomPlaceHolder from './RoomPlaceHolder';
+import RoomCardPlaceHolder from './RoomCardPlaceHolder';
 import Modal from '../shared_components/modals/Modal';
 import CreateRoomForm from './room/forms/CreateRoomForm';
 import { useAuth } from '../../contexts/auth/AuthProvider';
@@ -34,10 +34,10 @@ export default function RoomsList() {
       <Row className="g-4 mt-4">
         {
           // eslint-disable-next-line react/no-array-index-key
-          (isLoading && [...Array(8)].map((val, idx) => <Col key={idx} className="mt-0 mb-4"><RoomPlaceHolder /></Col>))
+          (isLoading && [...Array(8)].map((val, idx) => <Col key={idx} className="col-md-auto mt-0 mb-4"><RoomCardPlaceHolder /></Col>))
           || rooms?.map((room) => (
             <Col key={room.friendly_id} className="col-md-auto mt-0 mb-4">
-              {(room.optimistic && <RoomPlaceHolder />) || <RoomCard room={room} />}
+              {(room.optimistic && <RoomCardPlaceHolder />) || <RoomCard room={room} />}
             </Col>
           ))
         }