Implement Skeleton for Main Component

[oidacra]

Parent Issue

#30012

Task

Implement a skeleton loading structure for the main component to improve user experience during data fetching and rendering.

Proposed Objective

Technical User Experience

Proposed Priority

Priority 3 - Average

Acceptance Criteria

1. Create a skeleton structure that closely resembles the layout of the main component:
   • Include placeholders for the toggle icon
   • Create skeleton structures for each tab (Info, History, Settings)
   • Implement skeleton accordions within each tab
2. Implement smooth fade-in/fade-out transitions between the skeleton and the actual content
3. Optimize the skeleton for performance to ensure it doesn't impact the overall load time
4. Implement logic to show the skeleton while data is being fetched
5. Create a reusable skeleton component that can be easily maintained and updated

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Screen.Recording.2024-09-16.at.12.11.50.PM.mov

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days.