asadjan4611 opened a new issue, #17948: URL: https://github.com/apache/dolphinscheduler/issues/17948
### Search before asking - [x] I had searched in the [issues](https://github.com/apache/dolphinscheduler/issues?q=is%3Aissue) and found no similar feature requirement. ### Description #### Current Problem When users navigate to the workflow definition list page or perform actions like searching, filtering, or pagination, there is minimal visual feedback during the data loading process. While the `NDataTable` component has a basic `loading` prop that shows a spinner overlay, this doesn't provide an optimal user experience because: 1. **Blank/Static Content**: Users see either empty content or stale data while new data is being fetched, making it unclear whether: - The page is still loading - The API call failed - There are no workflows to display - The system is processing the request 2. **Poor Perceived Performance**: Without proper loading indicators, users may think the application is frozen or unresponsive, especially on slower network connections or when dealing with large datasets. 3. **Inconsistent UX**: The current loading state doesn't match modern web application standards where skeleton screens or placeholders provide better visual feedback and improve perceived performance. 4. **User Confusion**: During the initial page load or when refreshing data, users cannot distinguish between: - Loading state - Empty state (no workflows) - Error state #### Proposed Solution Add a loading skeleton/placeholder component that displays while workflow definition data is being fetched. This should include: 1. **Skeleton Placeholders**: Display skeleton rows that mimic the structure of the actual workflow definition table, showing: - Placeholder rows (e.g., 5-10 skeleton rows) - Skeleton cells for each column (workflow name, status, create time, etc.) - Animated shimmer effect for better visual feedback 2. **Loading States**: Implement skeleton display for: - Initial page load - Data refresh operations - Search/filter operations - Pagination changes - After creating/updating workflows 3. **Smooth Transitions**: Ensure smooth transitions between: - Loading skeleton → Data display - Loading skeleton → Empty state (if no data) - Loading skeleton → Error state (if API fails) 4. **Consistent Implementation**: Apply the same skeleton pattern to other list pages in the application for consistency. #### Benefits - **Improved User Experience**: Users get clear visual feedback that data is being loaded - **Better Perceived Performance**: Skeleton screens make the application feel faster and more responsive - **Reduced User Confusion**: Clear distinction between loading, empty, and error states - **Modern UX Pattern**: Follows industry best practices used by major web applications (GitHub, LinkedIn, Facebook, etc.) - **Professional Appearance**: Makes the application look more polished and enterprise-ready - **Accessibility**: Better for users with slower connections who need clear feedback #### Implementation Approach 1. **Use Naive UI Skeleton Component**: Leverage Naive UI's `n-skeleton` component which is already available in the project dependencies 2. **Create Skeleton Component**: - Create a reusable skeleton component that matches the table structure - Include skeleton rows with appropriate column widths - Add shimmer animation for visual appeal 3. **Update Loading Logic**: - Modify `use-table.ts` to properly track loading states - Update `index.tsx` to conditionally render skeleton or data table - Ensure loading state is set correctly for all data fetching operations 4. **Handle Edge Cases**: - Show skeleton during initial load - Show skeleton when refreshing - Show skeleton during search/filter operations - Transition smoothly to empty state if no data - Transition smoothly to error state if API fails 5. **Consistency**: Apply the same pattern to other list pages (workflow instances, task definitions, etc.) #### Related Code Locations - `dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx` (main component, line 198-207) - `dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts` (data fetching logic, `loadingRef` at line 73) - `dolphinscheduler-ui/src/components/` (potential location for reusable skeleton component) - Naive UI documentation: https://www.naiveui.com/en-US/os-theme/components/skeleton #### Example Implementation The skeleton should display something like: ``` ┌─────────────────────────────────────────────────────────┐ │ [Skeleton Row 1] │ │ ┌──────┐ ┌──────────────┐ ┌──────┐ ┌──────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ └──────┘ └──────────────┘ └──────┘ └──────────────┘ │ ├─────────────────────────────────────────────────────────┤ │ [Skeleton Row 2] │ │ ┌──────┐ ┌──────────────┐ ┌──────┐ ┌──────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ └──────┘ └──────────────┘ └──────┘ └──────────────┘ │ ├─────────────────────────────────────────────────────────┤ │ [Skeleton Row 3] │ │ ... (with shimmer animation) │ └─────────────────────────────────────────────────────────┘ ``` **Code Example**: ```tsx // In index.tsx {loadingRef ? ( <NSkeleton height="400px" :repeat="5" :sharp="false" /> ) : ( <NDataTable loading={false} rowKey={(row) => row.code} columns={this.columns} data={this.tableData} ... /> )} ``` #### Additional Considerations - **Performance**: Ensure skeleton rendering doesn't impact performance - **Accessibility**: Add appropriate ARIA labels for screen readers - **Responsive Design**: Ensure skeleton adapts to different screen sizes - **Animation**: Use subtle, non-distracting animations - **Consistency**: Match the skeleton design with the actual table structure **Note**: This feature follows modern UX best practices and will significantly improve the user experience, especially for users with slower network connections or when working with large datasets. --- ### Are you willing to submit a PR? - [x] Yes I am willing to submit a PR! ### Code of Conduct - [x] I agree to follow this project's [Code of Conduct](https://www.apache.org/foundation/policies/conduct) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
