Skip to content

Conversation

@asadjan4611
Copy link

What changes were proposed in this pull request?

This PR adds a loading skeleton/placeholder for the workflow definition list during data fetch operations, addressing issue #17948.

Changes:

  • Added NSkeleton component from Naive UI to display loading placeholder
  • Implemented conditional rendering to show skeleton during initial load, search, and pagination when no data exists
  • Set table loading prop to false to prevent triggering global loading indicators
  • Added comprehensive comments and documentation explaining the implementation

Implementation Details:

  • Skeleton displays when loadingRef === true AND tableData is empty/null
  • Skeleton repeat count matches page size for visual consistency
  • Height set to 400px to accommodate multiple skeleton rows
  • Uses Naive UI's animated shimmer effect

Benefits:

  • Improved perceived performance with immediate visual feedback
  • Better UX during slow network connections
  • Clear distinction between loading, empty, and error states
  • Isolated loading state (doesn't affect other components like navbar)

Related issue(s)

Closes #17948

Type of change

  • New feature (non-breaking change which adds functionality)

Testing

  • Tested skeleton display during initial page load
  • Tested skeleton display during search with no results
  • Tested skeleton display during pagination to empty pages
  • Verified no global loading indicators are triggered
  • Verified navbar/profile section is unaffected

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published

@boring-cyborg
Copy link

boring-cyborg bot commented Feb 5, 2026

Thanks for opening this pull request! Please check out our contributing guidelines. (https://github.com/apache/dolphinscheduler/blob/dev/docs/docs/en/contribute/join/pull-request.md)

@github-actions github-actions bot added the UI ui and front end related label Feb 5, 2026
@SbloodyS SbloodyS added the feature new feature label Feb 5, 2026
@SbloodyS SbloodyS added this to the 3.4.1 milestone Feb 5, 2026
@SbloodyS SbloodyS added the first time contributor First-time contributor label Feb 5, 2026
@sonarqubecloud
Copy link

Copy link
Member

@SbloodyS SbloodyS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't directly use AI generated code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature new feature first time contributor First-time contributor UI ui and front end related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature][UI] Add loading skeleton/placeholder for workflow definition list during data fetch

2 participants