From 764a2ffb05f6d966fc4241f5c8a0796d159c4eb2 Mon Sep 17 00:00:00 2001 From: mufazalov Date: Mon, 17 Mar 2025 17:58:20 +0300 Subject: [PATCH 1/2] fix(ShemaViewer): show loader correctly --- .../Tenant/Schema/SchemaViewer/SchemaViewer.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx index 916153bcf..761309869 100644 --- a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx +++ b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx @@ -42,14 +42,18 @@ export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaV // Refresh table only in Diagnostics const pollingInterval = extended ? autoRefreshInterval : undefined; - const {currentData: schemaData, isLoading: loading} = overviewApi.useGetOverviewQuery( + const {currentData: schemaData, isFetching} = overviewApi.useGetOverviewQuery( {path, database: tenantName}, {pollingInterval}, ); + // useGetOverviewQuery is called in Tenant, so isLoading will be always false in this component + // to show loader properly, we need to check isFetching and currentData + const loading = isFetching && schemaData === undefined; + const viewSchemaRequestParams = isViewType(type) ? {path, database: tenantName} : skipToken; - const {data: viewColumnsData, isLoading: isViewSchemaLoading} = + const {currentData: viewColumnsData, isLoading: isViewSchemaLoading} = viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams, {pollingInterval}); const tableData = React.useMemo(() => { From 5b6fecbc8aaf64bf96adc23b2673a24b2f49882a Mon Sep 17 00:00:00 2001 From: mufazalov Date: Wed, 19 Mar 2025 12:53:35 +0300 Subject: [PATCH 2/2] fix loader for view --- .../Schema/SchemaViewer/SchemaViewer.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx index 761309869..552788e27 100644 --- a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx +++ b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import {skipToken} from '@reduxjs/toolkit/query'; - import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable'; import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton'; import {overviewApi} from '../../../../store/reducers/overview/overview'; @@ -42,27 +40,28 @@ export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaV // Refresh table only in Diagnostics const pollingInterval = extended ? autoRefreshInterval : undefined; - const {currentData: schemaData, isFetching} = overviewApi.useGetOverviewQuery( - {path, database: tenantName}, - {pollingInterval}, - ); - - // useGetOverviewQuery is called in Tenant, so isLoading will be always false in this component - // to show loader properly, we need to check isFetching and currentData - const loading = isFetching && schemaData === undefined; - - const viewSchemaRequestParams = isViewType(type) ? {path, database: tenantName} : skipToken; - - const {currentData: viewColumnsData, isLoading: isViewSchemaLoading} = - viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams, {pollingInterval}); + const {currentData: tableSchemaData, isFetching: isTableSchemaFetching} = + overviewApi.useGetOverviewQuery( + {path, database: tenantName}, + {pollingInterval, skip: isViewType(type)}, + ); + const {currentData: viewColumnsData, isFetching: isViewSchemaFetching} = + viewSchemaApi.useGetViewSchemaQuery( + {path, database: tenantName}, + {pollingInterval, skip: !isViewType(type)}, + ); + + const loading = + (isViewSchemaFetching && viewColumnsData === undefined) || + (isTableSchemaFetching && tableSchemaData === undefined); const tableData = React.useMemo(() => { if (isViewType(type)) { return prepareViewSchema(viewColumnsData); } - return prepareSchemaData(type, schemaData); - }, [schemaData, type, viewColumnsData]); + return prepareSchemaData(type, tableSchemaData); + }, [tableSchemaData, type, viewColumnsData]); const hasAutoIncrement = React.useMemo(() => { return tableData.some((i) => i.autoIncrement); @@ -89,7 +88,7 @@ export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaV return []; }, [type, extended, hasAutoIncrement, hasDefaultValue, tableData]); - if (loading || isViewSchemaLoading) { + if (loading) { return ; }