💄 improve placeholder on personal page and home cards (#328)

* 💄 improve placeholder on personal page

* 💄 improve home card placeholder

rogue-thi-app/components/cards/FoodCard.jsx

@@ -6,9 +6,12 @@ import { faUtensils } from '@fortawesome/free-solid-svg-icons'
 import { Trans, useTranslation } from 'next-i18next'
 import BaseCard from './BaseCard'
 import { FoodFilterContext } from '../../pages/_app'
+import { TextBlock } from 'react-placeholder/lib/placeholders'
 import { formatISODate } from '../../lib/date-utils'
 import { loadFoodEntries } from '../../lib/backend-utils/food-utils'
 
+import styles from '../../styles/Home.module.css'
+
 /**
  * Dashboard card for Mensa and Reimanns food plans.
  */
@@ -87,13 +90,24 @@ export default function FoodCard () {
     load()
   }, [selectedRestaurants, preferencesSelection, allergenSelection, t, i18n])
 
+  const placeholder = (
+    <ListGroup variant='flush' >
+      <ListGroup.Item>
+        <TextBlock rows={2} className={styles.placeholder_3_0}/>
+      </ListGroup.Item>
+      <ListGroup.Item>
+        <TextBlock rows={1} className={styles.placeholder_3_0}/>
+      </ListGroup.Item>
+    </ListGroup>
+  )
+
   return (
     <BaseCard
       icon={faUtensils}
       i18nKey={`food.location.${foodCardTitle}`}
       link="/food"
     >
-      <ReactPlaceholder type="text" rows={5} ready={foodEntries || foodError}>
+      <ReactPlaceholder ready={foodEntries || foodError} customPlaceholder={placeholder}>
         <ListGroup variant="flush">
           {foodEntries && foodEntries.map((x, i) => (
             <ListGroup.Item key={i}>

rogue-thi-app/components/cards/MobilityCard.jsx

@@ -11,6 +11,7 @@ import {
 
 import {
   RenderMobilityEntry,
+  RenderMobilityEntryPlaceholder,
   getMobilityEntries,
   getMobilityLabel,
   getMobilitySettings
@@ -66,13 +67,23 @@ export default function MobilityCard () {
     load()
   }, [mobilitySettings, time, t])
 
+  const placeholder = (
+    <ListGroup variant="flush">
+      {Array.from({ length: 4 }, (_, i) => (
+        <ListGroup.Item className={styles.mobilityItem} key={i}>
+          <RenderMobilityEntryPlaceholder kind={mobilitySettings?.kind} styles={styles} />
+        </ListGroup.Item>
+      ))}
+    </ListGroup>
+  )
+
   return (
     <BaseCard
       icon={mobilityIcon}
       title={t(mobilityLabel)}
       link="/mobility"
     >
-      <ReactPlaceholder type="text" rows={5} ready={mobility || mobilityError}>
+      <ReactPlaceholder ready={mobility || mobilityError} customPlaceholder={placeholder}>
         <ListGroup variant="flush">
           {mobility && mobility.slice(0, 4).map((entry, i) => <ListGroup.Item key={i} className={styles.mobilityItem}>
             <RenderMobilityEntry kind={mobilitySettings.kind} item={entry} maxLen={MAX_STATION_LENGTH} styles={styles} detailed={false}/>

rogue-thi-app/components/cards/RoomCard.jsx

@@ -10,7 +10,9 @@ import { findSuggestedRooms, getEmptySuggestions, getTranslatedRoomName } from '
 import { formatFriendlyTime, isSameDay } from '../../lib/date-utils'
 import { getFriendlyTimetable, getTimetableGaps } from '../../lib/backend-utils/timetable-utils'
 import { NoSessionError } from '../../lib/backend/thi-session-handler'
+
 import ReactPlaceholder from 'react-placeholder/lib'
+import { TextBlock } from 'react-placeholder/lib/placeholders'
 
 import { USER_STUDENT, useUserKind } from '../../lib/hooks/user-kind'
 import Link from 'next/link'
@@ -70,13 +72,23 @@ export default function RoomCard () {
     }
   }, [router, userKind])
 
+  const placeholder = (
+    <ListGroup variant="flush">
+      {Array.from({ length: 2 }, (_, i) => (
+        <ListGroup.Item key={i}>
+          <TextBlock rows={2} />
+        </ListGroup.Item>
+      ))}
+    </ListGroup>
+  )
+
   return (
     <BaseCard
       icon={faDoorOpen}
       i18nKey="rooms"
       link="/rooms"
     >
-      <ReactPlaceholder type="text" rows={4} ready={filterResults || userKind !== USER_STUDENT}>
+      <ReactPlaceholder ready={filterResults || userKind !== USER_STUDENT} customPlaceholder={placeholder}>
         <ListGroup variant="flush">
           {filterResults && filterResults.slice(0, 2).map((x, i) => {
             return (

rogue-thi-app/components/cards/TimetableCard.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import ListGroup from 'react-bootstrap/ListGroup'
 import ReactPlaceholder from 'react-placeholder'
+import { TextBlock } from 'react-placeholder/lib/placeholders'
 import { useRouter } from 'next/router'
 
 import { faCalendarMinus } from '@fortawesome/free-solid-svg-icons'
@@ -11,6 +12,8 @@ import BaseCard from './BaseCard'
 import { NoSessionError } from '../../lib/backend/thi-session-handler'
 import { useTranslation } from 'next-i18next'
 
+import styles from '../../styles/Home.module.css'
+
 /**
  * Dashboard card for the timetable.
  */
@@ -42,13 +45,25 @@ export default function TimetableCard () {
     return () => clearInterval(interval)
   }, [])
 
+  const placeholder = (
+    <>
+      <ListGroup variant="flush">
+        {Array.from({ length: 2 }, (_, i) => (
+          <ListGroup.Item key={i}>
+            <TextBlock rows={2} className={styles.placeholder_2_5}/>
+          </ListGroup.Item>
+        ))}
+      </ListGroup>
+    </>
+  )
+
   return (
     <BaseCard
       icon={faCalendarMinus}
       i18nKey="timetable"
       link="/timetable"
     >
-      <ReactPlaceholder type="text" rows={5} ready={timetable || timetableError}>
+      <ReactPlaceholder ready={timetable || timetableError} customPlaceholder={placeholder}>
         <ListGroup variant="flush">
           {(timetable && timetable.slice(0, 2).map((x, i) => {
             const isSoon = (x.startDate > currentTime && new Date(x.startDate) <= new Date(currentTime.getTime() + 30 * 60 * 1000))

rogue-thi-app/lib/backend-utils/mobility-utils.jsx

@@ -2,6 +2,8 @@ import { faEuroSign, faKey } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCreativeCommonsNcEu } from '@fortawesome/free-brands-svg-icons'
 
+import { TextBlock } from 'react-placeholder/lib/placeholders'
+
 import { formatFriendlyTime, formatRelativeMinutes } from '../date-utils'
 import API from '../backend/authenticated-api'
 import NeulandAPI from '../backend/neuland-api'
@@ -108,6 +110,29 @@ export async function getMobilityEntries (kind, station) {
   }
 }
 
+export function RenderMobilityEntryPlaceholder ({ kind, styles }) {
+  if (kind === 'charging') {
+    return (
+      <>
+        <div className={`${styles.mobilityDestination} ${styles.placeholder_4_0}`}>
+          <TextBlock rows={1} />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className={styles.mobilityRoute}>
+      - - -
+      </div>
+      <div className={styles.mobilityDestination}>
+        <TextBlock rows={1} />
+      </div>
+    </>
+  )
+}
+
 /**
  * Renders a row on the mobility page.
  * @param {string} kind Mobility type (`bus`, `train`, `parking` or `charging`)
@@ -138,17 +163,17 @@ export function RenderMobilityEntry ({ kind, item, maxLen, styles, detailed }) {
     const timeString = formatTimes(item.actualTime, 30, 90)
 
     return (
-  <>
-    <div className={styles.mobilityRoute}>
-      {item.name}
-    </div>
-    <div className={`${styles.mobilityDestination} ${item.canceled ? styles.mobilityCanceled : ''}`}>
-      {item.destination.length <= maxLen ? item.destination : item.destination.substr(0, maxLen) + '…'}
-    </div>
-    <div className={`${styles.mobilityTime} ${item.canceled ? styles.mobilityCanceled : ''}`}>
-      {timeString}
-    </div>
-  </>
+      <>
+        <div className={styles.mobilityRoute}>
+          {item.name}
+        </div>
+        <div className={`${styles.mobilityDestination} ${item.canceled ? styles.mobilityCanceled : ''}`}>
+          {item.destination.length <= maxLen ? item.destination : item.destination.substr(0, maxLen) + '…'}
+        </div>
+        <div className={`${styles.mobilityTime} ${item.canceled ? styles.mobilityCanceled : ''}`}>
+          {timeString}
+        </div>
+      </>
     )
   } else if (kind === 'parking') {
     return (

rogue-thi-app/pages/personal.jsx

@@ -37,6 +37,7 @@ import themes from '../data/themes.json'
 
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
+import { TextBlock } from 'react-placeholder/lib/placeholders'
 
 const PRIVACY_URL = process.env.NEXT_PUBLIC_PRIVACY_URL
 
@@ -121,11 +122,25 @@ export default function Personal () {
     }
   }, [router, userKind])
 
+  const placeholder = (
+    <>
+      <ListGroup.Item action>
+        <TextBlock rows={2} className={styles.placeholder} />
+      </ListGroup.Item>
+      <ListGroup.Item action>
+        <TextBlock rows={2} className={styles.placeholder} />
+      </ListGroup.Item>
+      <ListGroup.Item action>
+        <TextBlock rows={1} className={styles.placeholder} />
+      </ListGroup.Item>
+    </>
+  )
+
   return (<AppContainer>
     <AppNavbar title={t('personal.title')} />
 
     <AppBody>
-      <ReactPlaceholder type="text" rows={10} ready={userdata || userKind !== USER_STUDENT}>
+      <ReactPlaceholder ready={userdata || userKind !== USER_STUDENT} customPlaceholder={placeholder}>
 
         {userKind === USER_STUDENT &&
           <ListGroup>

rogue-thi-app/styles/Home.module.css

@@ -98,3 +98,15 @@
   white-space: nowrap;
   width: auto;
 }
+
+.placeholder_2_5 {
+  margin: 2.5px 0;
+}
+
+.placeholder_3_0 {
+  margin: 3px 0;
+}
+
+.placeholder_4_0 {
+  margin: 4px 0;
+}

rogue-thi-app/styles/Personal.module.css

@@ -33,3 +33,7 @@
   justify-content: center;
   align-items: center;
 }
+
+.placeholder {
+  margin: 3.5px 0;
+}