💄 improve placeholder on personal page and home cards #328
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Examples:
🤖 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.Walkthrough
TextBlock
component fromreact-placeholder
to create custom placeholders for different cards and pages (link, link, link, link, link)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)ReactPlaceholder
components to use thecustomPlaceholder
prop and pass theplaceholder
variables as the value instead of using thetype
androws
props (link, link, link, link)RenderMobilityEntryPlaceholder
function frommobility-utils
to create custom placeholders for the mobility card (link)placeholder
variable as JSX element that contains list group items with mobility entry placeholders of different kinds depending on the mobility settings (link)ReactPlaceholder
component to use thecustomPlaceholder
prop and pass theplaceholder
variable as the value instead of using thetype
androws
props (link)RenderMobilityEntryPlaceholder
function as a component that returns a text block or a dashed line depending on the kind of mobility entry (link)RenderMobilityEntry
function to use thestyles
prop to apply custom margins to the mobility destination and time elements (link)styles
variable fromHome.module.css
to apply custom margins to the text blocks in the timetable card (link).placeholder_2_5
,.placeholder_3_0
, and.placeholder_4_0
classes inHome.module.css
to apply custom margins of 2.5px, 3px, and 4px respectively to the text blocks (link).placeholder
class inPersonal.module.css
to apply a custom margin of 3.5px to the text blocks (link)caniuse-lite
dependency to the latest version and addgithub
funding type and url inpackage-lock.json
(link, link)