Skip to content

Add ResponsiveShipmentList and Skeleton loading components#953

Merged
mftee merged 1 commit into
CodeGirlsInc:mainfrom
harouns-ux:fix/issues-897-898-responsive-skeleton
Jun 1, 2026
Merged

Add ResponsiveShipmentList and Skeleton loading components#953
mftee merged 1 commit into
CodeGirlsInc:mainfrom
harouns-ux:fix/issues-897-898-responsive-skeleton

Conversation

@harouns-ux
Copy link
Copy Markdown
Contributor

The shipment list table overflowed on mobile requiring horizontal scrolling. ResponsiveShipmentList renders a table on md+ screens and card-per-row on mobile using Tailwind responsive prefixes.

Pages showed a blank area while data loaded. The Skeletons library provides SkeletonText, SkeletonBox, SkeletonAvatar, SkeletonCard, SkeletonTable, and SkeletonShipmentCard using Tailwind animate-pulse.

Closes #897
Closes #898

Mobile screens were forced to scroll horizontally through a wide table
making the shipment list effectively unusable on phones.
ResponsiveShipmentList renders a standard table on md+ screens and
switches to a compact card-per-row layout on mobile using Tailwind
responsive prefixes — no extra dependencies needed.

Pages displayed a blank white area while data loaded from the API,
causing jarring layout shifts. The Skeletons library provides
SkeletonText, SkeletonBox, SkeletonAvatar, SkeletonCard, SkeletonTable,
and SkeletonShipmentCard — each matching the dimensions of its data
counterpart and using Tailwind's animate-pulse class.

Closes CodeGirlsInc#897
Closes CodeGirlsInc#898
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 1, 2026

@harouns-ux is attempting to deploy a commit to the Mftee's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@harouns-ux Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@mftee mftee merged commit da85619 into CodeGirlsInc:main Jun 1, 2026
1 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FE-30] Build skeleton loading component library [FE-29] Build mobile-responsive shipment list component

2 participants