From 6b43f13e57fddcd8fb090b862b9d3b3a3b87d304 Mon Sep 17 00:00:00 2001 From: asadjan4611 Date: Thu, 5 Feb 2026 08:20:17 +0500 Subject: [PATCH 1/4] [Feature-17948][ui] Add loading skeleton/placeholder for workflow definition list during data fetch --- .../projects/workflow/definition/index.tsx | 81 ++++++++++++++++--- 1 file changed, 69 insertions(+), 12 deletions(-) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx index 6d0a28cba433..1c3466f61fa6 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx @@ -23,7 +23,8 @@ import { NPagination, NSpace, NTooltip, - NPopconfirm + NPopconfirm, + NSkeleton } from 'naive-ui' import { defineComponent, @@ -43,6 +44,7 @@ import TimingModal from './components/timing-modal' import VersionModal from './components/version-modal' import CopyModal from './components/copy-modal' import type { Router } from 'vue-router' +import type { IDefinitionData } from './types' import Search from '@/components/input-search' import DependenciesModal from '@/views/projects/components/dependencies/dependencies-modal' import totalCount from '@/utils/tableTotalCount' @@ -145,7 +147,33 @@ export default defineComponent({ }, render() { const { t } = useI18n() - const { loadingRef } = this + // Extract reactive variables for efficient access and cleaner code + const { loadingRef, tableData, pageSize } = this + + /** + * Determine if skeleton placeholder should be displayed. + * Show skeleton when: + * - Data is being loaded (loadingRef === true) + * - AND no data exists yet (tableData is null/undefined or empty array) + * + * This covers scenarios: + * - Initial page load + * - Search/filter operations that return no results + * - Pagination changes when moving to empty pages + * + * Note: We use skeleton only when no data exists to avoid flickering. + * When data exists and is refreshing, we show the existing data (no loading overlay) + * to prevent triggering global loading indicators in other components. + */ + const showSkeleton = loadingRef && (!tableData || tableData.length === 0) + + /** + * Skeleton repeat count matches the current page size for visual consistency. + * This ensures the skeleton placeholder matches the expected number of table rows, + * providing a more accurate preview of the final content layout. + * Defaults to 10 if pageSize is not available. + */ + const skeletonRepeat = pageSize || 10 return ( @@ -195,16 +223,45 @@ export default defineComponent({ - row.code} - columns={this.columns} - data={this.tableData} - striped - v-model:checked-row-keys={this.checkedRowKeys} - row-class-name='items' - scrollX={this.tableWidth} - /> + {/** + * Conditional rendering: Skeleton placeholder vs Data table + * + * Implementation details: + * - Skeleton is shown during initial load or when no data exists during loading + * - Empty array fallback ensures table always receives valid data structure + * - Table loading prop is always false to prevent triggering global loading indicators + * + * Benefits: + * - Improved perceived performance (users see immediate feedback) + * - Better UX during slow network connections + * - Clear distinction between loading, empty, and error states + * - Follows modern web application UX patterns + * - Isolated loading state (doesn't affect other components like navbar or global loading indicators) + * + * Technical notes: + * - NSkeleton uses Naive UI component with animated shimmer effect + * - Height of 400px provides adequate space for multiple skeleton rows + * - sharp={false} creates rounded skeleton blocks for modern appearance + * - repeat prop dynamically matches page size for visual consistency + * - Table loading prop is explicitly set to false to prevent global loading indicators + * + * Related to issue #17948 + * @see https://github.com/apache/dolphinscheduler/issues/17948 + */} + {showSkeleton ? ( + + ) : ( + row.code} + columns={this.columns} + data={tableData || []} + striped + v-model:checked-row-keys={this.checkedRowKeys} + row-class-name='items' + scrollX={this.tableWidth} + /> + )} From 104d95fec19cabacd24e060cafe074f6304134b7 Mon Sep 17 00:00:00 2001 From: asadjan4611 Date: Fri, 6 Feb 2026 23:53:44 +0500 Subject: [PATCH 2/4] fix: apply code formatting to pass CI lint check --- .../src/views/projects/workflow/definition/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx index 1c3466f61fa6..b3917d98c719 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx @@ -249,7 +249,7 @@ export default defineComponent({ * @see https://github.com/apache/dolphinscheduler/issues/17948 */} {showSkeleton ? ( - + ) : ( Date: Tue, 10 Feb 2026 10:26:23 +0500 Subject: [PATCH 3/4] [Feature-17948][ui] Add loading skeleton for workflow definition list during data fetch --- .../projects/workflow/definition/index.tsx | 62 +++---------------- 1 file changed, 9 insertions(+), 53 deletions(-) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx index 503ba8d99ec3..1152d93cf092 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx @@ -144,33 +144,10 @@ export default defineComponent({ }, render() { const { t } = useI18n() - // Extract reactive variables for efficient access and cleaner code - const { loadingRef, tableData, pageSize } = this + const { loadingRef } = this - /** - * Determine if skeleton placeholder should be displayed. - * Show skeleton when: - * - Data is being loaded (loadingRef === true) - * - AND no data exists yet (tableData is null/undefined or empty array) - * - * This covers scenarios: - * - Initial page load - * - Search/filter operations that return no results - * - Pagination changes when moving to empty pages - * - * Note: We use skeleton only when no data exists to avoid flickering. - * When data exists and is refreshing, we show the existing data (no loading overlay) - * to prevent triggering global loading indicators in other components. - */ - const showSkeleton = loadingRef && (!tableData || tableData.length === 0) - - /** - * Skeleton repeat count matches the current page size for visual consistency. - * This ensures the skeleton placeholder matches the expected number of table rows, - * providing a more accurate preview of the final content layout. - * Defaults to 10 if pageSize is not available. - */ - const skeletonRepeat = pageSize || 10 + const showSkeleton = + loadingRef && (!this.tableData || this.tableData.length === 0) return ( @@ -212,39 +189,18 @@ export default defineComponent({ - {/** - * Conditional rendering: Skeleton placeholder vs Data table - * - * Implementation details: - * - Skeleton is shown during initial load or when no data exists during loading - * - Empty array fallback ensures table always receives valid data structure - * - Table loading prop is always false to prevent triggering global loading indicators - * - * Benefits: - * - Improved perceived performance (users see immediate feedback) - * - Better UX during slow network connections - * - Clear distinction between loading, empty, and error states - * - Follows modern web application UX patterns - * - Isolated loading state (doesn't affect other components like navbar or global loading indicators) - * - * Technical notes: - * - NSkeleton uses Naive UI component with animated shimmer effect - * - Height of 400px provides adequate space for multiple skeleton rows - * - sharp={false} creates rounded skeleton blocks for modern appearance - * - repeat prop dynamically matches page size for visual consistency - * - Table loading prop is explicitly set to false to prevent global loading indicators - * - * Related to issue #17948 - * @see https://github.com/apache/dolphinscheduler/issues/17948 - */} {showSkeleton ? ( - + ) : ( row.code} columns={this.columns} - data={tableData || []} + data={this.tableData} striped v-model:checked-row-keys={this.checkedRowKeys} row-class-name='items' From 89511361e0243ffdeff9372aeaf0cd17ed1a3b82 Mon Sep 17 00:00:00 2001 From: asadjan4611 Date: Wed, 11 Feb 2026 07:12:41 +0500 Subject: [PATCH 4/4] [Feature-17948][ui] Fix skeleton loading implementation based on review feedback --- .../src/views/projects/workflow/definition/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx index 1152d93cf092..f9c5893f55aa 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx @@ -191,13 +191,13 @@ export default defineComponent({ {showSkeleton ? ( ) : ( row.code} columns={this.columns} data={this.tableData}