💄 improve placeholder on personal page and home cards

[BuildmodeOne]

Examples:

Old	New

🤖 Generated by Copilot at 75642a4

Summary

🎨🚀🌐

This pull request adds custom placeholders for various components of the neuland.app using react-placeholder and CSS modules. This improves the user experience and the visual consistency of the app while the data is loading. The pull request also updates a dependency and adds funding information.

Sing, O Muse, of the skillful coder who devised Custom placeholders for the cards of food and room, Of mobility and timetable, with TextBlock styled By Home.module.css and Personal.module.css in bloom.

Walkthrough

• Import TextBlock component from react-placeholder to create custom placeholders for different cards and pages (link, link, link, link, link)
• Define placeholder variables as JSX elements that contain list group items with text blocks of different sizes and margins to mimic the data entries for food, room, timetable, and personal cards and pages (link, link, link, link)
• Modify ReactPlaceholder components to use the customPlaceholder prop and pass the placeholder variables as the value instead of using the type and rows props (link, link, link, link)
• Import RenderMobilityEntryPlaceholder function from mobility-utils to create custom placeholders for the mobility card (link)
• Define placeholder variable as JSX element that contains list group items with mobility entry placeholders of different kinds depending on the mobility settings (link)
• Modify ReactPlaceholder component to use the customPlaceholder prop and pass the placeholder variable as the value instead of using the type and rows props (link)
• Define RenderMobilityEntryPlaceholder function as a component that returns a text block or a dashed line depending on the kind of mobility entry (link)
• Modify RenderMobilityEntry function to use the styles prop to apply custom margins to the mobility destination and time elements (link)
• Import styles variable from Home.module.css to apply custom margins to the text blocks in the timetable card (link)
• Define .placeholder_2_5, .placeholder_3_0, and .placeholder_4_0 classes in Home.module.css to apply custom margins of 2.5px, 3px, and 4px respectively to the text blocks (link)
• Define .placeholder class in Personal.module.css to apply a custom margin of 3.5px to the text blocks (link)
• Update caniuse-lite dependency to the latest version and add github funding type and url in package-lock.json (link, link)