Skip to content

Conversation

hiirrxnn
Copy link

This PR implements skeleton loading states for all table components (Pods, Jobs, Queues) to improve user experience while data is being fetched. Users now see immediate visual feedback with placeholder content that matches the actual table structure.

Solves #143

🔧 Changes Made

Table Components Enhanced:

  • JobTable: Added skeleton rows with 6 columns matching the actual structure
  • PodsTable: Added skeleton rows with 5 columns matching pod data layout
  • QueueTable: Added dynamic skeleton rows that adapt to allocated fields

Parent Components Updated:

  • Jobs.jsx: Pass isLoading and skeletonRows props to JobTable
  • Pods.jsx: Pass isLoading and skeletonRows props to PodsTable
  • Queues.jsx: Pass isLoading and skeletonRows props to QueueTable

Skeleton Features:

  • Realistic Layout: Different skeleton widths (60%, 70%, 80%, 90%) for natural appearance
  • Proper Variants: Text skeletons for content, rounded for badges, circular for action buttons
  • Smooth Transitions: No layout shifts when transitioning from skeleton to real content
Screenshot 2025-05-23 at 12 50 06 PM Screenshot 2025-05-23 at 12 50 37 PM Screenshot 2025-05-23 at 12 50 59 PM

Signed-off-by: hiirrxnn <[email protected]>

Skeleton loading to jobs,queues,pods
@volcano-sh-bot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign william-wang
You can assign the PR to them by writing /assign @william-wang in a comment when ready.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@hiirrxnn
Copy link
Author

/assign @william-wang

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants