fix(ktabledata): loading prop should override internal loading state

Author: Justineo

package.json

@@ -101,7 +101,7 @@
     "commitizen": "^4.3.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "^13.15.2",
+    "cypress": "^13.17.0",
     "cypress-fail-fast": "^7.1.1",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "^9.19.0",

pnpm-lock.yaml

@@ -189,6 +189,26 @@ describe('KTableData', () => {
       cy.get('.skeleton-table-wrapper').should('be.visible')
       cy.get('.k-empty-state').should('not.exist')
     })
+
+    it('does not display a loading state when `loading` is false, regardless of fetcher state', () => {
+      const slowFetcher = () => {
+        return new Promise((resolve) => setTimeout(resolve, 2500))
+      }
+
+      cy.mount(KTableData, {
+        props: {
+          fetcher: slowFetcher,
+          headers: options.headers,
+          cacheIdentifier: 'loading-test',
+          loading: false,
+          paginationAttributes: {
+            pageSizes: [10, 20, 30, 40],
+          },
+        },
+      })
+
+      cy.get('.skeleton-table-wrapper').should('not.exist')
+    })
   })
 
   describe('default', () => {

src/components/KTableData/KTableData.cy.ts

@@ -19,7 +19,7 @@
     :hide-pagination="hidePagination || !showPagination"
     :hide-pagination-when-optional="false"
     :hide-toolbar="hideToolbar"
-    :loading="loading || fetcherIsLoading"
+    :loading="loading ?? fetcherIsLoading"
     :max-height="maxHeight"
     :nested="nested"
     :pagination-attributes="tablePaginationAttributes"
@@ -188,7 +188,7 @@ const props = withDefaults(defineProps<TableDataProps>(), {
   rowBulkActionEnabled: () => true,
   rowKey: '',
   cellAttrs: () => ({}),
-  loading: false,
+  loading: undefined,
   emptyStateTitle: 'No Data',
   emptyStateMessage: 'There is no data to display.',
   emptyStateActionMessage: '',