From 3346d95b15866ec39d6354fdf94e370eadeb90c5 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Sat, 4 Jul 2026 13:32:37 +0530 Subject: [PATCH 01/17] fix(ui): reduce suspense loader flashes --- .../ActivityFeedTab.component.tsx | 8 --- .../AppRouter/withSuspenseFallback.test.tsx | 51 +++++++++++++++++++ .../AppRouter/withSuspenseFallback.tsx | 10 +--- .../Directory/DirectoryDetails.tsx | 14 ++--- .../DriveService/File/FileDetails.tsx | 14 ++--- .../Spreadsheet/SpreadsheetDetails.tsx | 14 ++--- .../Worksheet/WorksheetDetails.tsx | 14 ++--- .../IngestionWorkflowForm.tsx | 3 +- .../TopicDetails/TopicDetails.component.tsx | 27 +++++----- .../LazyTabContent/LazyTabContent.test.tsx | 47 +++++++++++++++++ .../common/LazyTabContent/LazyTabContent.tsx | 41 +++++++++++++++ .../AddServicePage.component.tsx | 5 +- .../EditConnectionFormPage.component.tsx | 4 +- .../EmbeddedAddServicePage.component.tsx | 5 +- .../utils/APIEndpoints/APIEndpointUtils.tsx | 8 +-- .../ui/src/utils/ChartDetailsUtils.tsx | 8 +-- .../ui/src/utils/ContainerDetailUtils.tsx | 8 +-- .../utils/CustomizableLandingPageUtils.tsx | 5 +- .../ui/src/utils/DashboardDataModelUtils.tsx | 8 +-- .../ui/src/utils/DashboardDetailsUtils.tsx | 8 +-- .../utils/MetricEntityUtils/MetricUtils.tsx | 8 +-- .../ui/src/utils/MlModelDetailsUtils.tsx | 23 +++++---- .../ui/src/utils/PipelineDetailsUtils.tsx | 23 +++++---- .../ui/src/utils/SearchIndexUtils.tsx | 8 +-- .../ui/src/utils/StoredProceduresUtils.tsx | 8 +-- .../resources/ui/src/utils/TableTabsUtils.tsx | 24 ++++----- 26 files changed, 246 insertions(+), 150 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx index e05483a7ca26..8d0196767df9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx @@ -72,7 +72,6 @@ import { showErrorToast } from '../../../utils/ToastUtils'; import { useRequiredParams } from '../../../utils/useRequiredParams'; import withSuspenseFallback from '../../AppRouter/withSuspenseFallback'; import ErrorPlaceHolderNew from '../../common/ErrorWithPlaceholder/ErrorPlaceHolderNew'; -import Loader from '../../common/Loader/Loader'; import '../../MyData/Widgets/FeedsWidget/feeds-widget.less'; import ActivityFeedListV1New from '../ActivityFeedList/ActivityFeedListV1New.component'; import TaskListV1 from '../ActivityFeedList/TaskListV1.component'; @@ -480,11 +479,6 @@ export const ActivityFeedTab = ({ } }, [entityPaging, loading, isInView, fqn]); - const loader = useMemo( - () => (loading ? : null), - [loading] - ); - const handleUpdateTaskFilter = (filter: TaskStatusGroup) => { setTaskFilter(filter); getTaskData(feedFilter, undefined, entityType, fqn, filter); @@ -857,7 +851,6 @@ export const ActivityFeedTab = ({ onFeedClick={handleFeedClick} /> )} - {!isFirstLoad && loader} {!isEmpty( isTaskActiveTab || isMentionTabSelected ? tasks : entityThread ) && @@ -882,7 +875,6 @@ export const ActivityFeedTab = ({ 'three-panel-layout': layoutType === ActivityFeedLayoutType.THREE_PANEL, })}> - {loader} {(selectedThread || selectedTask || selectedActivity) && !loading ? getRightPanelContent() : !loading && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx new file mode 100644 index 000000000000..a389eed0368c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx @@ -0,0 +1,51 @@ +/* + * Copyright 2026 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { render, screen } from '@testing-library/react'; +import { lazy } from 'react'; +import { withSuspenseFallback } from './withSuspenseFallback'; + +describe('withSuspenseFallback', () => { + const getLazyComponent = () => + lazy( + () => + new Promise<{ default: () => JSX.Element }>((resolve) => { + setTimeout(() => { + resolve({ + default: () =>
Loaded component
, + }); + }, 0); + }) + ); + + it('does not render a default loading indicator while the chunk loads', () => { + const WrappedComponent = withSuspenseFallback(getLazyComponent()); + + render(); + + expect(screen.queryByText('Loading...')).not.toBeInTheDocument(); + expect(screen.queryByTestId('loader')).not.toBeInTheDocument(); + }); + + it('renders an explicit fallback when the caller provides one', async () => { + const WrappedComponent = withSuspenseFallback( + getLazyComponent(), +
Loading active route
+ ); + + render(); + + expect(screen.getByText('Loading active route')).toBeInTheDocument(); + expect(await screen.findByText('Loaded component')).toBeInTheDocument(); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx index 0bf0b94d7567..374ab2620261 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx @@ -12,17 +12,11 @@ */ import { ComponentType, forwardRef, ReactNode, Suspense } from 'react'; -import Loader from '../common/Loader/Loader'; - -const DEFAULT_FALLBACK = ( -
- -
-); export function withSuspenseFallback( Component: ComponentType, - fallback: ReactNode = DEFAULT_FALLBACK + // Default to silent loading so background chunks do not create page-level loaders. + fallback: ReactNode = null ) { return forwardRef(function DefaultFallback(props, ref) { return ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx index d3759607e357..8c5e2c410c6e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx @@ -14,14 +14,7 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { - lazy, - Suspense, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -69,6 +62,7 @@ import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/Activ import { withActivityFeed } from '../../AppRouter/withActivityFeed'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; +import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -362,14 +356,14 @@ function DirectoryDetails({ /> ), lineageTab: ( - }> + - + ), customPropertiesTab: directoryDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx index 07d8d002c081..2c013269a11b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx @@ -13,14 +13,7 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { - lazy, - Suspense, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -67,6 +60,7 @@ import { ActivityFeedTab } from '../../ActivityFeed/ActivityFeedTab/ActivityFeed import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; +import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -331,14 +325,14 @@ function FileDetails({ /> ), lineageTab: ( - }> + - + ), customPropertiesTab: fileDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx index 78538c7fbdbe..61e73badda09 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx @@ -13,14 +13,7 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { - lazy, - Suspense, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -67,6 +60,7 @@ import { ActivityFeedTab } from '../../ActivityFeed/ActivityFeedTab/ActivityFeed import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; +import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -344,14 +338,14 @@ function SpreadsheetDetails({ /> ), lineageTab: ( - }> + - + ), customPropertiesTab: spreadsheetDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx index f93152012e59..a9707d7291e0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx @@ -13,14 +13,7 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { - lazy, - Suspense, - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -66,6 +59,7 @@ import { ActivityFeedTab } from '../../ActivityFeed/ActivityFeedTab/ActivityFeed import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; +import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -343,14 +337,14 @@ function WorksheetDetails({ /> ), lineageTab: ( - }> + - + ), customPropertiesTab: worksheetDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx index 564262307742..f267f5d8b076 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx @@ -45,7 +45,6 @@ import { transformErrors } from '../../../../../utils/formPureUtils'; import { getSchemaByWorkflowType } from '../../../../../utils/IngestionWorkflowUtils'; import CoreInputWidget from '../../../../common/FormBuilderV1/widgets/CoreInputWidget'; import CoreSelectWidget from '../../../../common/FormBuilderV1/widgets/CoreSelectWidget'; -import Loader from '../../../../common/Loader/Loader'; const BooleanFieldTemplate = lazy( () => @@ -287,7 +286,7 @@ const IngestionWorkflowForm = forwardRef< }; return ( - }> +
- import('../../Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ - default: module.EntityLineageTab, - }) - ) - ) +const EntityLineageTab = lazy(() => + import('../../Lineage/EntityLineageTab/EntityLineageTab').then((module) => ({ + default: module.EntityLineageTab, + })) ); const QueryViewer = withSuspenseFallback( @@ -437,12 +434,14 @@ const TopicDetails: React.FC = ({ /> ), lineageTab: ( - + + + ), customPropertiesTab: topicDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx new file mode 100644 index 000000000000..b54d6cdeaeb5 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx @@ -0,0 +1,47 @@ +/* + * Copyright 2026 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { render, screen } from '@testing-library/react'; +import { lazy } from 'react'; +import { EntityTabs } from '../../../enums/entity.enum'; +import { LazyTabContent } from './LazyTabContent'; + +describe('LazyTabContent', () => { + const LazyChild = lazy(() => + Promise.resolve({ + default: () =>
Loaded active tab
, + }) + ); + + it('does not render fallback or child for inactive tabs', () => { + render( + + + + ); + + expect(screen.queryByTestId('active-tab-loader')).not.toBeInTheDocument(); + expect(screen.queryByText('Loaded active tab')).not.toBeInTheDocument(); + }); + + it('renders fallback while the active tab chunk is loading', async () => { + render( + + + + ); + + expect(screen.getByTestId('active-tab-loader')).toBeInTheDocument(); + expect(await screen.findByText('Loaded active tab')).toBeInTheDocument(); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx new file mode 100644 index 000000000000..210265d9ad86 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx @@ -0,0 +1,41 @@ +/* + * Copyright 2026 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ReactNode, Suspense } from 'react'; +import { EntityTabs } from '../../../enums/entity.enum'; +import Loader from '../Loader/Loader'; + +interface LazyTabContentProps { + activeTab: EntityTabs; + children: ReactNode; + fallback?: ReactNode; + tab: EntityTabs; +} + +export const LazyTabContent = ({ + activeTab, + children, + fallback = ( +
+ +
+ ), + tab, +}: LazyTabContentProps) => { + // Keep inactive lazy tabs unmounted so their chunks cannot flash fallback UI. + if (activeTab !== tab) { + return null; + } + + return {children}; +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx index e1c7cf121cac..4d9fe9fb7bda 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx @@ -29,7 +29,6 @@ import React, { } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import Loader from '../../components/common/Loader/Loader'; import { NavigationBlocker } from '../../components/common/NavigationBlocker/NavigationBlocker'; import { NavigationGuardModal } from '../../components/common/NavigationGuardModal/NavigationGuardModal'; import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels'; @@ -423,7 +422,7 @@ const AddServicePage = () => { /> )} - }> + {activeServiceStep === 2 && (
{ pageTitle={t('label.add-entity', { entity: t('label.service') })} secondPanel={{ children: ( - }> + - }> +
{activeServiceStep === 1 && ( }> + { /> )} - }> + {activeServiceStep === 2 && (
{ pageTitle={t('label.add-entity', { entity: t('label.service') })} secondPanel={{ children: ( - }> + }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx index bf29cbfee262..20f7403842ce 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx @@ -13,14 +13,14 @@ import { t } from 'i18next'; import { get } from 'lodash'; -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import Loader from '../components/common/Loader/Loader'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -126,14 +126,14 @@ export const getChartDetailPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx index b6c0051c6be4..6bfa0f82cea0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx @@ -13,7 +13,7 @@ import { Col, Row } from 'antd'; import { get } from 'lodash'; -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { @@ -21,7 +21,7 @@ import type { ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; -import Loader from '../components/common/Loader/Loader'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { ContainerWidget } from '../components/Container/ContainerWidget/ContainerWidget'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -212,14 +212,14 @@ export const getContainerDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx index 9477d58d4ffc..66a18cb1bb60 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx @@ -13,7 +13,6 @@ import { isUndefined } from 'lodash'; import { lazy, Suspense } from 'react'; -import WidgetWrapper from '../components/MyData/Widgets/Common/WidgetWrapper/WidgetWrapper'; import type { WidgetConfig } from '../pages/CustomizablePage/CustomizablePage.interface'; import customizeMyDataPageClassBase from './CustomizeMyDataPageClassBase'; @@ -54,7 +53,7 @@ export const getWidgetFromKey = ({ !isUndefined(handlePlaceholderWidgetKey) ) { return ( - {null}}> + {null}}> + }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx index 15fa8e2a79e3..84e27f4d3503 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx @@ -13,14 +13,14 @@ import { AxiosError } from 'axios'; import { get } from 'lodash'; -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import Loader from '../components/common/Loader/Loader'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import type { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import type { ChartType } from '../components/Dashboard/DashboardDetails/DashboardDetails.interface'; import type { SourceType } from '../components/SearchedData/SearchedData.interface'; @@ -174,14 +174,14 @@ export const getDashboardDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx index 71e8e9866dd2..2104fea72ca9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx @@ -11,14 +11,14 @@ * limitations under the License. */ -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import Loader from '../../components/common/Loader/Loader'; +import { LazyTabContent } from '../../components/common/LazyTabContent/LazyTabContent'; import type { SourceType } from '../../components/SearchedData/SearchedData.interface'; import { DetailPageWidgetKeys } from '../../enums/CustomizeDetailPage.enum'; import { EntityTabs, EntityType } from '../../enums/entity.enum'; @@ -154,14 +154,14 @@ export const getMetricDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx index ec1b23a09402..a72dc2aa8cd5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx @@ -19,6 +19,7 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -58,11 +59,9 @@ const ContractTab = withSuspenseFallback( ) ); -const EntityLineageTab = withSuspenseFallback( - lazy(() => - import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ default: module.EntityLineageTab }) - ) +const EntityLineageTab = lazy(() => + import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ default: module.EntityLineageTab }) ) ); @@ -149,12 +148,14 @@ export const getMlModelDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx index 12e4ad76d392..4e61bb27298f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx @@ -22,6 +22,7 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -66,11 +67,9 @@ const ContractTab = withSuspenseFallback( ) ); -const EntityLineageTab = withSuspenseFallback( - lazy(() => - import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ default: module.EntityLineageTab }) - ) +const EntityLineageTab = lazy(() => + import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ default: module.EntityLineageTab }) ) ); @@ -168,12 +167,14 @@ export const getPipelineDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - + + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx index d9cad5bdffe5..87e1f9e40648 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx @@ -12,7 +12,7 @@ */ import { get, uniqueId } from 'lodash'; -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { @@ -20,7 +20,7 @@ import type { ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; -import Loader from '../components/common/Loader/Loader'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -186,14 +186,14 @@ export const getSearchIndexDetailsTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx index 40723d31c8e0..c15d3d47b0c4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx @@ -11,14 +11,14 @@ * limitations under the License. */ import { get } from 'lodash'; -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import Loader from '../components/common/Loader/Loader'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -126,14 +126,14 @@ export const getStoredProcedureDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx index f97e52bdb5e7..8cdacc7b4e4c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx @@ -13,14 +13,14 @@ import { Divider, Space, Typography } from 'antd'; import { get, isUndefined } from 'lodash'; -import { lazy, Suspense } from 'react'; +import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import Loader from '../components/common/Loader/Loader'; +import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import type { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import type { SourceType } from '../components/SearchedData/SearchedData.interface'; import { NO_DATA_PLACEHOLDER } from '../constants/constants'; @@ -109,11 +109,9 @@ const DataObservabilityTab = withSuspenseFallback( ) ); -const EntityLineageTab = withSuspenseFallback( - lazy(() => - import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ default: module.EntityLineageTab }) - ) +const EntityLineageTab = lazy(() => + import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ default: module.EntityLineageTab }) ) ); @@ -124,8 +122,8 @@ const TableConstraints = withSuspenseFallback( ) ); -const KnowledgeGraph = withSuspenseFallback( - lazy(() => import('../components/KnowledgeGraph3D/KnowledgeGraph3D')) +const KnowledgeGraph = lazy( + () => import('../components/KnowledgeGraph3D/KnowledgeGraph3D') ); const QueryViewer = withSuspenseFallback( @@ -293,14 +291,14 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + - + ), }, { @@ -317,7 +315,7 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.KNOWLEDGE_GRAPH, children: ( - }> + - + ), isHidden: !useApplicationStore.getState().rdfEnabled, }, From 380d72d669ecfbc2c326b5cf6f90b55ff42c72d3 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Sat, 4 Jul 2026 13:58:26 +0530 Subject: [PATCH 02/17] fix(ui): scope suspense loading states --- .../ActivityFeedTab.component.tsx | 9 +- .../ui/src/components/AppRouter/AppRouter.tsx | 16 +-- .../AppRouter/AuthenticatedAppRouter.tsx | 120 +++++++++--------- .../AppRouter/AuthenticatedRoutes.tsx | 12 +- .../ContextCenterRouter.tsx | 14 +- .../AppRouter/EntityImportRouter.tsx | 4 +- .../src/components/AppRouter/EntityRouter.tsx | 4 +- .../components/AppRouter/SettingsRouter.tsx | 100 +++++++-------- .../AppRouter/UnAuthenticatedAppRouter.tsx | 18 +-- .../AppRouter/withSuspenseFallback.test.tsx | 22 +++- .../AppRouter/withSuspenseFallback.tsx | 14 +- .../IngestionWorkflowForm.tsx | 3 +- .../AddServicePage.component.tsx | 3 +- .../EditConnectionFormPage.component.tsx | 2 +- .../EmbeddedAddServicePage.component.tsx | 3 +- .../utils/CustomizableLandingPageUtils.tsx | 3 +- 16 files changed, 194 insertions(+), 153 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx index 8d0196767df9..43693fb1488e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx @@ -72,6 +72,7 @@ import { showErrorToast } from '../../../utils/ToastUtils'; import { useRequiredParams } from '../../../utils/useRequiredParams'; import withSuspenseFallback from '../../AppRouter/withSuspenseFallback'; import ErrorPlaceHolderNew from '../../common/ErrorWithPlaceholder/ErrorPlaceHolderNew'; +import Loader from '../../common/Loader/Loader'; import '../../MyData/Widgets/FeedsWidget/feeds-widget.less'; import ActivityFeedListV1New from '../ActivityFeedList/ActivityFeedListV1New.component'; import TaskListV1 from '../ActivityFeedList/TaskListV1.component'; @@ -479,6 +480,11 @@ export const ActivityFeedTab = ({ } }, [entityPaging, loading, isInView, fqn]); + const loader = useMemo( + () => (loading ? : null), + [loading] + ); + const handleUpdateTaskFilter = (filter: TaskStatusGroup) => { setTaskFilter(filter); getTaskData(feedFilter, undefined, entityType, fqn, filter); @@ -851,6 +857,7 @@ export const ActivityFeedTab = ({ onFeedClick={handleFeedClick} /> )} + {!isFirstLoad && loader} {!isEmpty( isTaskActiveTab || isMentionTabSelected ? tasks : entityThread ) && @@ -875,7 +882,7 @@ export const ActivityFeedTab = ({ 'three-panel-layout': layoutType === ActivityFeedLayoutType.THREE_PANEL, })}> - {(selectedThread || selectedTask || selectedActivity) && !loading + {selectedThread || selectedTask || selectedActivity ? getRightPanelContent() : !loading && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx index b2c6956ebb72..9df9a037c587 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx @@ -21,13 +21,13 @@ import { useAppMode } from '../../hooks/useAppMode'; import { useAppRoutesRegistry } from '../../hooks/useAppRoutesRegistry'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; import Loader from '../common/Loader/Loader'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const AuthenticatedApp = withSuspenseFallback( +const AuthenticatedApp = withPageSuspenseFallback( lazy(() => import('./AuthenticatedApp')) ); -const AuthenticatedRoutes = withSuspenseFallback( +const AuthenticatedRoutes = withPageSuspenseFallback( lazy(() => import('./AuthenticatedRoutes').then((m) => ({ default: m.AuthenticatedRoutes, @@ -36,11 +36,11 @@ const AuthenticatedRoutes = withSuspenseFallback( ); // Lazy-load infrequently-visited unauthenticated pages -const AccessNotAllowedPage = withSuspenseFallback( +const AccessNotAllowedPage = withPageSuspenseFallback( lazy(() => import('../../pages/AccessNotAllowedPage/AccessNotAllowedPage')) ); -const LogoutPage = withSuspenseFallback( +const LogoutPage = withPageSuspenseFallback( lazy(() => import('../../pages/LogoutPage/LogoutPage').then((m) => ({ default: m.LogoutPage, @@ -48,15 +48,15 @@ const LogoutPage = withSuspenseFallback( ) ); -const PageNotFound = withSuspenseFallback( +const PageNotFound = withPageSuspenseFallback( lazy(() => import('../../pages/PageNotFound/PageNotFound')) ); -const SamlCallback = withSuspenseFallback( +const SamlCallback = withPageSuspenseFallback( lazy(() => import('../../pages/SamlCallback')) ); -const SignUpPage = withSuspenseFallback( +const SignUpPage = withPageSuspenseFallback( lazy(() => import('../../pages/SignUp/SignUpPage')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx index 7150f47f6d25..9579bfca42f3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx @@ -25,16 +25,16 @@ import { checkPermission, userPermissions } from '../../utils/PermissionsUtils'; import { useApplicationsProvider } from '../Settings/Applications/ApplicationsProvider/ApplicationsProvider'; import { RoutePosition } from '../Settings/Applications/plugins/AppPlugin'; import AdminProtectedRoute from './AdminProtectedRoute'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; // Previously statically imported — lazify so they stay out of the main chunk -const AddCustomMetricPage = withSuspenseFallback( +const AddCustomMetricPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/AddCustomMetricPage/AddCustomMetricPage') ) ); -const CustomizablePage = withSuspenseFallback( +const CustomizablePage = withPageSuspenseFallback( React.lazy(() => import('../../pages/CustomizablePage/CustomizablePage').then((m) => ({ default: m.CustomizablePage, @@ -42,125 +42,125 @@ const CustomizablePage = withSuspenseFallback( ) ); -const DataQualityPage = withSuspenseFallback( +const DataQualityPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/DataQuality/DataQualityPage')) ); -const ForbiddenPage = withSuspenseFallback( +const ForbiddenPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/ForbiddenPage/ForbiddenPage')) ); -const PlatformLineage = withSuspenseFallback( +const PlatformLineage = withPageSuspenseFallback( React.lazy(() => import('../../pages/PlatformLineage/PlatformLineage')) ); -const TagPage = withSuspenseFallback( +const TagPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/TagPage/TagPage')) ); -const DomainRouter = withSuspenseFallback( +const DomainRouter = withPageSuspenseFallback( React.lazy(() => import('./DomainRouter')) ); -const DataProductListPage = withSuspenseFallback( +const DataProductListPage = withPageSuspenseFallback( React.lazy(() => import('../DataProduct/DataProductListPage')) ); -const SettingsRouter = withSuspenseFallback( +const SettingsRouter = withPageSuspenseFallback( React.lazy(() => import('./SettingsRouter')) ); -const EntityRouter = withSuspenseFallback( +const EntityRouter = withPageSuspenseFallback( React.lazy(() => import('./EntityRouter')) ); -const ClassificationRouter = withSuspenseFallback( +const ClassificationRouter = withPageSuspenseFallback( React.lazy(() => import('./ClassificationRouter')) ); -const GlossaryRouter = withSuspenseFallback( +const GlossaryRouter = withPageSuspenseFallback( React.lazy(() => import('./GlossaryRouter/GlossaryRouter')) ); -const GlossaryTermRouter = withSuspenseFallback( +const GlossaryTermRouter = withPageSuspenseFallback( React.lazy(() => import('./GlossaryTermRouter/GlossaryTermRouter')) ); -const MyDataPage = withSuspenseFallback( +const MyDataPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/MyDataPage/MyDataPage.component')) ); -const TestSuiteIngestionPage = withSuspenseFallback( +const TestSuiteIngestionPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/TestSuiteIngestionPage/TestSuiteIngestionPage') ) ); -const TestSuiteDetailsPage = withSuspenseFallback( +const TestSuiteDetailsPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component') ) ); -const AddCustomProperty = withSuspenseFallback( +const AddCustomProperty = withPageSuspenseFallback( React.lazy( () => import('../Settings/CustomProperty/AddCustomProperty/AddCustomProperty') ) ); -const MarketPlacePage = withSuspenseFallback( +const MarketPlacePage = withPageSuspenseFallback( React.lazy(() => import('../../pages/MarketPlacePage/MarketPlacePage')) ); -const DataMarketplacePage = withSuspenseFallback( +const DataMarketplacePage = withPageSuspenseFallback( React.lazy( () => import('../../pages/DataMarketplacePage/DataMarketplacePage.component') ) ); -const BotDetailsPage = withSuspenseFallback( +const BotDetailsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/BotDetailsPage/BotDetailsPage')) ); -const ServicePage = withSuspenseFallback( +const ServicePage = withPageSuspenseFallback( React.lazy(() => import('../../pages/ServiceDetailsPage/ServiceDetailsPage')) ); -const SwaggerPage = withSuspenseFallback( +const SwaggerPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/SwaggerPage')) ); -const TourPageComponent = withSuspenseFallback( +const TourPageComponent = withPageSuspenseFallback( React.lazy(() => import('../../pages/TourPage/TourPage.component')) ); -const UserPage = withSuspenseFallback( +const UserPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/UserPage/UserPage.component')) ); -const DomainVersionPage = withSuspenseFallback( +const DomainVersionPage = withPageSuspenseFallback( React.lazy( () => import('../../components/Domain/DomainVersion/DomainVersion.component') ) ); -const AddIngestionPage = withSuspenseFallback( +const AddIngestionPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/AddIngestionPage/AddIngestionPage.component') ) ); -const AddServicePage = withSuspenseFallback( +const AddServicePage = withPageSuspenseFallback( React.lazy( () => import('../../pages/AddServicePage/AddServicePage.component') ) ); -const MarketPlaceAppDetails = withSuspenseFallback( +const MarketPlaceAppDetails = withPageSuspenseFallback( React.lazy( () => import( @@ -169,11 +169,11 @@ const MarketPlaceAppDetails = withSuspenseFallback( ) ); -const AppInstallPage = withSuspenseFallback( +const AppInstallPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/AppInstall/AppInstall.component')) ); -const EditConnectionFormPage = withSuspenseFallback( +const EditConnectionFormPage = withPageSuspenseFallback( React.lazy( () => import( @@ -182,46 +182,46 @@ const EditConnectionFormPage = withSuspenseFallback( ) ); -const CreateUserPage = withSuspenseFallback( +const CreateUserPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/CreateUserPage/CreateUserPage.component') ) ); -const EditIngestionPage = withSuspenseFallback( +const EditIngestionPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/EditIngestionPage/EditIngestionPage.component') ) ); -const ServiceVersionPage = withSuspenseFallback( +const ServiceVersionPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/ServiceVersionPage/ServiceVersionPage')) ); -const ExplorePageV1 = withSuspenseFallback( +const ExplorePageV1 = withPageSuspenseFallback( React.lazy(() => import('../../pages/ExplorePage/ExplorePageV1.component')) ); -const OntologyExplorerPage = withSuspenseFallback( +const OntologyExplorerPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/OntologyExplorerPage/OntologyExplorerPage') ) ); -const WorkflowsListPage = withSuspenseFallback( +const WorkflowsListPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/WorkflowDefinitions/WorkflowsPage/WorkflowsPage') ) ); -const WorkflowBuilderPage = withSuspenseFallback( +const WorkflowBuilderPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder') ) ); -const RequestDescriptionPage = withSuspenseFallback( +const RequestDescriptionPage = withPageSuspenseFallback( React.lazy( () => import( @@ -230,13 +230,13 @@ const RequestDescriptionPage = withSuspenseFallback( ) ); -const RequestTagsPage = withSuspenseFallback( +const RequestTagsPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/TasksPage/RequestTagPage/RequestTagPage') ) ); -const UpdateDescriptionPage = withSuspenseFallback( +const UpdateDescriptionPage = withPageSuspenseFallback( React.lazy( () => import( @@ -245,45 +245,45 @@ const UpdateDescriptionPage = withSuspenseFallback( ) ); -const UpdateTagsPage = withSuspenseFallback( +const UpdateTagsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/TasksPage/UpdateTagPage/UpdateTagPage')) ); -const LogsViewerPage = withSuspenseFallback( +const LogsViewerPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/LogsViewerPage/LogsViewerPage')) ); -const DataInsightPage = withSuspenseFallback( +const DataInsightPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/DataInsightPage/DataInsightPage.component') ) ); -const AddKPIPage = withSuspenseFallback( +const AddKPIPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/KPIPage/AddKPIPage')) ); -const EditKPIPage = withSuspenseFallback( +const EditKPIPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/KPIPage/EditKPIPage')) ); -const QueryPage = withSuspenseFallback( +const QueryPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/QueryPage/QueryPage.component')) ); -const AddQueryPage = withSuspenseFallback( +const AddQueryPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/AddQueryPage/AddQueryPage.component')) ); -const IncidentManagerPage = withSuspenseFallback( +const IncidentManagerPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/IncidentManager/IncidentManagerPage')) ); -const TestLibraryPage = withSuspenseFallback( +const TestLibraryPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/TestLibrary/TestLibraryPage')) ); -const IncidentManagerDetailPage = withSuspenseFallback( +const IncidentManagerDetailPage = withPageSuspenseFallback( React.lazy( () => import( @@ -292,52 +292,52 @@ const IncidentManagerDetailPage = withSuspenseFallback( ) ); -const TestCaseVersionPage = withSuspenseFallback( +const TestCaseVersionPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/TestCaseVersionPage/TestCaseVersionPage') ) ); -const ObservabilityAlertsPage = withSuspenseFallback( +const ObservabilityAlertsPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/ObservabilityAlertsPage/ObservabilityAlertsPage') ) ); -const AlertDetailsPage = withSuspenseFallback( +const AlertDetailsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/AlertDetailsPage/AlertDetailsPage')) ); -const AddObservabilityPage = withSuspenseFallback( +const AddObservabilityPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/AddObservabilityPage/AddObservabilityPage') ) ); -const ContextCenterRouter = withSuspenseFallback( +const ContextCenterRouter = withPageSuspenseFallback( React.lazy(() => import('./ContextCenterRouter/ContextCenterRouter')) ); -const MetricListPage = withSuspenseFallback( +const MetricListPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/MetricsPage/MetricListPage/MetricListPage') ) ); -const AddMetricPage = withSuspenseFallback( +const AddMetricPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/MetricsPage/AddMetricPage/AddMetricPage') ) ); -const ColumnBulkOperationsPage = withSuspenseFallback( +const ColumnBulkOperationsPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/ColumnBulkOperations/ColumnBulkOperations.component') ) ); -const McpChatPage = withSuspenseFallback( +const McpChatPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/McpChatPage/McpChatPage')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedRoutes.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedRoutes.tsx index 9bb196dc01f9..e6727104c74b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedRoutes.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedRoutes.tsx @@ -20,13 +20,13 @@ import { useApplicationStore } from '../../hooks/useApplicationStore'; import AppContainer from '../AppContainer/AppContainer'; import { useApplicationsProvider } from '../Settings/Applications/ApplicationsProvider/ApplicationsProvider'; import { RoutePosition } from '../Settings/Applications/plugins/AppPlugin'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const PageNotFound = withSuspenseFallback( +const PageNotFound = withPageSuspenseFallback( lazy(() => import('../../pages/PageNotFound/PageNotFound')) ); -const LogoutPage = withSuspenseFallback( +const LogoutPage = withPageSuspenseFallback( lazy(() => import('../../pages/LogoutPage/LogoutPage').then((module) => ({ default: module.LogoutPage, @@ -34,15 +34,15 @@ const LogoutPage = withSuspenseFallback( ) ); -const AccessNotAllowedPage = withSuspenseFallback( +const AccessNotAllowedPage = withPageSuspenseFallback( lazy(() => import('../../pages/AccessNotAllowedPage/AccessNotAllowedPage')) ); -const SignUpPage = withSuspenseFallback( +const SignUpPage = withPageSuspenseFallback( lazy(() => import('../../pages/SignUp/SignUpPage')) ); -const SamlCallback = withSuspenseFallback( +const SamlCallback = withPageSuspenseFallback( lazy(() => import('../../pages/SamlCallback')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/ContextCenterRouter/ContextCenterRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/ContextCenterRouter/ContextCenterRouter.tsx index 0548233f6bb9..6847ef1b5649 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/ContextCenterRouter/ContextCenterRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/ContextCenterRouter/ContextCenterRouter.tsx @@ -14,9 +14,9 @@ import React from 'react'; import { Navigate, Route, Routes } from 'react-router-dom'; import { ROUTES } from '../../../constants/constants'; -import withSuspenseFallback from '../withSuspenseFallback'; +import { withPageSuspenseFallback } from '../withSuspenseFallback'; -const ContextCenterDashboardPage = withSuspenseFallback( +const ContextCenterDashboardPage = withPageSuspenseFallback( React.lazy( () => import( @@ -25,7 +25,7 @@ const ContextCenterDashboardPage = withSuspenseFallback( ) ); -const ContextCenterArticlesPage = withSuspenseFallback( +const ContextCenterArticlesPage = withPageSuspenseFallback( React.lazy( () => import( @@ -34,7 +34,7 @@ const ContextCenterArticlesPage = withSuspenseFallback( ) ); -const ContextCenterDocumentsPage = withSuspenseFallback( +const ContextCenterDocumentsPage = withPageSuspenseFallback( React.lazy( () => import( @@ -43,7 +43,7 @@ const ContextCenterDocumentsPage = withSuspenseFallback( ) ); -const ContextCenterMemoriesPage = withSuspenseFallback( +const ContextCenterMemoriesPage = withPageSuspenseFallback( React.lazy( () => import( @@ -52,7 +52,7 @@ const ContextCenterMemoriesPage = withSuspenseFallback( ) ); -const KnowledgeCenterFilterPage = withSuspenseFallback( +const KnowledgeCenterFilterPage = withPageSuspenseFallback( React.lazy( () => import( @@ -61,7 +61,7 @@ const KnowledgeCenterFilterPage = withSuspenseFallback( ) ); -const ContextCenterArchivePage = withSuspenseFallback( +const ContextCenterArchivePage = withPageSuspenseFallback( React.lazy( () => import( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityImportRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityImportRouter.tsx index db0f485ee09d..7bc505522ae2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityImportRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityImportRouter.tsx @@ -19,9 +19,9 @@ import { ResourceEntity } from '../../context/PermissionProvider/PermissionProvi import { useFqn } from '../../hooks/useFqn'; import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils'; import { useRequiredParams } from '../../utils/useRequiredParams'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const BulkEntityImportPage = withSuspenseFallback( +const BulkEntityImportPage = withPageSuspenseFallback( React.lazy( () => import( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx index f7a239cfefda..889c19589c66 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx @@ -20,9 +20,9 @@ import { EntityType } from '../../enums/entity.enum'; import entityUtilClassBase from '../../utils/EntityUtilClassBase'; import { useRequiredParams } from '../../utils/useRequiredParams'; import EntityImportRouter from './EntityImportRouter'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const EntityVersionPage = withSuspenseFallback( +const EntityVersionPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/EntityVersionPage/EntityVersionPage.component') ) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/SettingsRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/SettingsRouter.tsx index e0ed194d9a48..0e997c934218 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/SettingsRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/SettingsRouter.tsx @@ -30,19 +30,19 @@ import { getTeamsWithFqnPath, } from '../../utils/RouterUtils'; import AdminProtectedRoute from './AdminProtectedRoute'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const AddNotificationPage = withSuspenseFallback( +const AddNotificationPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/AddNotificationPage/AddNotificationPage') ) ); -const AlertDetailsPage = withSuspenseFallback( +const AlertDetailsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/AlertDetailsPage/AlertDetailsPage')) ); -const AppearanceConfigSettingsPage = withSuspenseFallback( +const AppearanceConfigSettingsPage = withPageSuspenseFallback( React.lazy( () => import( @@ -51,32 +51,32 @@ const AppearanceConfigSettingsPage = withSuspenseFallback( ) ); -const ApplicationPage = withSuspenseFallback( +const ApplicationPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/Application/ApplicationPage')) ); -const AuditLogsPage = withSuspenseFallback( +const AuditLogsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/AuditLogsPage/AuditLogsPage')) ); -const BotsPageV1 = withSuspenseFallback( +const BotsPageV1 = withPageSuspenseFallback( React.lazy(() => import('../../pages/BotsPageV1/BotsPageV1.component')) ); -const ColumnBulkOperations = withSuspenseFallback( +const ColumnBulkOperations = withPageSuspenseFallback( React.lazy( () => import('../../pages/ColumnBulkOperations/ColumnBulkOperations.component') ) ); -const DataAssetRulesPage = withSuspenseFallback( +const DataAssetRulesPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/Configuration/DataAssetRules/DataAssetRulesPage') ) ); -const EditLoginConfiguration = withSuspenseFallback( +const EditLoginConfiguration = withPageSuspenseFallback( React.lazy( () => import( @@ -85,7 +85,7 @@ const EditLoginConfiguration = withSuspenseFallback( ) ); -const EditUrlConfigurationPage = withSuspenseFallback( +const EditUrlConfigurationPage = withPageSuspenseFallback( React.lazy( () => import( @@ -94,7 +94,7 @@ const EditUrlConfigurationPage = withSuspenseFallback( ) ); -const LoginConfigurationPage = withSuspenseFallback( +const LoginConfigurationPage = withPageSuspenseFallback( React.lazy( () => import( @@ -103,27 +103,27 @@ const LoginConfigurationPage = withSuspenseFallback( ) ); -const UrlConfigurationPage = withSuspenseFallback( +const UrlConfigurationPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/Configuration/UrlConfiguration/UrlConfigurationPage') ) ); -const CustomPropertiesPageV1 = withSuspenseFallback( +const CustomPropertiesPageV1 = withPageSuspenseFallback( React.lazy( () => import('../../pages/CustomPropertiesPageV1/CustomPropertiesPageV1') ) ); -const EditEmailConfigPage = withSuspenseFallback( +const EditEmailConfigPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/EditEmailConfigPage/EditEmailConfigPage.component') ) ); -const EmailConfigSettingsPage = withSuspenseFallback( +const EmailConfigSettingsPage = withPageSuspenseFallback( React.lazy( () => import( @@ -132,7 +132,7 @@ const EmailConfigSettingsPage = withSuspenseFallback( ) ); -const GlobalSettingCategoryPage = withSuspenseFallback( +const GlobalSettingCategoryPage = withPageSuspenseFallback( React.lazy( () => import( @@ -141,11 +141,11 @@ const GlobalSettingCategoryPage = withSuspenseFallback( ) ); -const GlobalSettingPage = withSuspenseFallback( +const GlobalSettingPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/GlobalSettingPage/GlobalSettingPage')) ); -const GlossaryTermRelationSettingsPage = withSuspenseFallback( +const GlossaryTermRelationSettingsPage = withPageSuspenseFallback( React.lazy( () => import( @@ -154,7 +154,7 @@ const GlossaryTermRelationSettingsPage = withSuspenseFallback( ) ); -const LearningResourcesPage = withSuspenseFallback( +const LearningResourcesPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/LearningResourcesPage/LearningResourcesPage').then( (m) => ({ default: m.LearningResourcesPage }) @@ -162,25 +162,25 @@ const LearningResourcesPage = withSuspenseFallback( ) ); -const LineageConfigPage = withSuspenseFallback( +const LineageConfigPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/LineageConfigPage/LineageConfigPage')) ); -const NotificationListPage = withSuspenseFallback( +const NotificationListPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/NotificationListPage/NotificationListPage') ) ); -const OmHealthPage = withSuspenseFallback( +const OmHealthPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/OmHealth/OmHealthPage')) ); -const OnlineUsersPage = withSuspenseFallback( +const OnlineUsersPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/OnlineUsersPage/OnlineUsersPage')) ); -const PersonaDetailsPage = withSuspenseFallback( +const PersonaDetailsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/Persona/PersonaDetailsPage/PersonaDetailsPage').then( (m) => ({ default: m.PersonaDetailsPage }) @@ -188,7 +188,7 @@ const PersonaDetailsPage = withSuspenseFallback( ) ); -const PersonaPage = withSuspenseFallback( +const PersonaPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/Persona/PersonaListPage/PersonaPage').then((m) => ({ default: m.PersonaPage, @@ -196,63 +196,63 @@ const PersonaPage = withSuspenseFallback( ) ); -const AddPolicyPage = withSuspenseFallback( +const AddPolicyPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/PoliciesPage/AddPolicyPage/AddPolicyPage') ) ); -const AddRulePage = withSuspenseFallback( +const AddRulePage = withPageSuspenseFallback( React.lazy( () => import('../../pages/PoliciesPage/PoliciesDetailPage/AddRulePage') ) ); -const EditRulePage = withSuspenseFallback( +const EditRulePage = withPageSuspenseFallback( React.lazy( () => import('../../pages/PoliciesPage/PoliciesDetailPage/EditRulePage') ) ); -const PoliciesDetailPage = withSuspenseFallback( +const PoliciesDetailPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage') ) ); -const PoliciesListPage = withSuspenseFallback( +const PoliciesListPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/PoliciesPage/PoliciesListPage/PoliciesListPage') ) ); -const ProfilerConfigurationPage = withSuspenseFallback( +const ProfilerConfigurationPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/ProfilerConfigurationPage/ProfilerConfigurationPage') ) ); -const AddRolePage = withSuspenseFallback( +const AddRolePage = withPageSuspenseFallback( React.lazy(() => import('../../pages/RolesPage/AddRolePage/AddRolePage')) ); -const RolesDetailPage = withSuspenseFallback( +const RolesDetailPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/RolesPage/RolesDetailPage/RolesDetailPage') ) ); -const RolesListPage = withSuspenseFallback( +const RolesListPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/RolesPage/RolesListPage/RolesListPage')) ); -const AISettingsPage = withSuspenseFallback( +const AISettingsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/AISettingsPage/AISettingsPage')) ); -const SearchIndexMappingsPage = withSuspenseFallback( +const SearchIndexMappingsPage = withPageSuspenseFallback( React.lazy( () => import( @@ -261,64 +261,64 @@ const SearchIndexMappingsPage = withSuspenseFallback( ) ); -const SearchSettingsPage = withSuspenseFallback( +const SearchSettingsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/SearchSettingsPage/SearchSettingsPage')) ); -const ServicesPage = withSuspenseFallback( +const ServicesPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/ServicesPage/ServicesPage')) ); -const TaskFormSettingsPage = withSuspenseFallback( +const TaskFormSettingsPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/TaskFormSettingsPage/TaskFormSettingsPage') ) ); -const IntakeFormsPage = withSuspenseFallback( +const IntakeFormsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/IntakeForms/IntakeFormsPage')) ); -const ImportTeamsPage = withSuspenseFallback( +const ImportTeamsPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/TeamsPage/ImportTeamsPage/ImportTeamsPage') ) ); -const TeamsPage = withSuspenseFallback( +const TeamsPage = withPageSuspenseFallback( React.lazy(() => import('../../pages/TeamsPage/TeamsPage')) ); -const UserListPageV1 = withSuspenseFallback( +const UserListPageV1 = withPageSuspenseFallback( React.lazy(() => import('../../pages/UserListPage/UserListPageV1')) ); -const WorkflowBuilderPage = withSuspenseFallback( +const WorkflowBuilderPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder') ) ); -const WorkflowsListPage = withSuspenseFallback( +const WorkflowsListPage = withPageSuspenseFallback( React.lazy( () => import('../../pages/WorkflowDefinitions/WorkflowsPage/WorkflowsPage') ) ); -const EntitySearchSettings = withSuspenseFallback( +const EntitySearchSettings = withPageSuspenseFallback( React.lazy( () => import('../SearchSettings/EntitySeachSettings/EntitySearchSettings') ) ); -const AppDetails = withSuspenseFallback( +const AppDetails = withPageSuspenseFallback( React.lazy( () => import('../Settings/Applications/AppDetails/AppDetails.component') ) ); -const AdminPermissionDebugger = withSuspenseFallback( +const AdminPermissionDebugger = withPageSuspenseFallback( React.lazy( () => import( @@ -327,7 +327,7 @@ const AdminPermissionDebugger = withSuspenseFallback( ) ); -const SettingsSso = withSuspenseFallback( +const SettingsSso = withPageSuspenseFallback( React.lazy(() => import('../SettingsSso/SettingsSso')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/UnAuthenticatedAppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/UnAuthenticatedAppRouter.tsx index 1dc50b4ff6d1..9a82a524e315 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/UnAuthenticatedAppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/UnAuthenticatedAppRouter.tsx @@ -19,39 +19,39 @@ import { AuthProvider } from '../../generated/configuration/authenticationConfig import { useApplicationStore } from '../../hooks/useApplicationStore'; import useCustomLocation from '../../hooks/useCustomLocation/useCustomLocation'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; -import withSuspenseFallback from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const SigninPage = withSuspenseFallback( +const SigninPage = withPageSuspenseFallback( lazy(() => import('../../pages/LoginPage/SignInPage')) ); -const ForgotPassword = withSuspenseFallback( +const ForgotPassword = withPageSuspenseFallback( lazy(() => import('../../pages/ForgotPassword/ForgotPassword.component')) ); -const ResetPassword = withSuspenseFallback( +const ResetPassword = withPageSuspenseFallback( lazy(() => import('../../pages/ResetPassword/ResetPassword.component')) ); -const BasicSignupPage = withSuspenseFallback( +const BasicSignupPage = withPageSuspenseFallback( lazy(() => import('../../pages/SignUp/BasicSignup.component')) ); -const PageNotFound = withSuspenseFallback( +const PageNotFound = withPageSuspenseFallback( lazy(() => import('../../pages/PageNotFound/PageNotFound')) ); -const AccountActivationConfirmation = withSuspenseFallback( +const AccountActivationConfirmation = withPageSuspenseFallback( lazy( () => import('../../pages/SignUp/account-activation-confirmation.component') ) ); -const Auth0Callback = withSuspenseFallback( +const Auth0Callback = withPageSuspenseFallback( lazy(() => import('../Auth/AppCallbacks/Auth0Callback/Auth0Callback')) ); -const LoginCallback = withSuspenseFallback( +const LoginCallback = withPageSuspenseFallback( lazy(() => import('@okta/okta-react').then((m) => ({ default: m.LoginCallback })) ) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx index a389eed0368c..ee04b6940d5c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.test.tsx @@ -13,7 +13,10 @@ import { render, screen } from '@testing-library/react'; import { lazy } from 'react'; -import { withSuspenseFallback } from './withSuspenseFallback'; +import { + withPageSuspenseFallback, + withSuspenseFallback, +} from './withSuspenseFallback'; describe('withSuspenseFallback', () => { const getLazyComponent = () => @@ -33,7 +36,14 @@ describe('withSuspenseFallback', () => { render(); - expect(screen.queryByText('Loading...')).not.toBeInTheDocument(); + expect(screen.queryByTestId('loader')).not.toBeInTheDocument(); + }); + + it('does not render a loading indicator when the caller opts into a silent fallback', () => { + const WrappedComponent = withSuspenseFallback(getLazyComponent(), null); + + render(); + expect(screen.queryByTestId('loader')).not.toBeInTheDocument(); }); @@ -48,4 +58,12 @@ describe('withSuspenseFallback', () => { expect(screen.getByText('Loading active route')).toBeInTheDocument(); expect(await screen.findByText('Loaded component')).toBeInTheDocument(); }); + + it('renders the page loading indicator for route-level chunks', () => { + const WrappedComponent = withPageSuspenseFallback(getLazyComponent()); + + render(); + + expect(screen.getByTestId('loader')).toBeInTheDocument(); + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx index 374ab2620261..8b2a0827e42d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx @@ -12,10 +12,16 @@ */ import { ComponentType, forwardRef, ReactNode, Suspense } from 'react'; +import Loader from '../common/Loader/Loader'; + +const DEFAULT_FALLBACK = ( +
+ +
+); export function withSuspenseFallback( Component: ComponentType, - // Default to silent loading so background chunks do not create page-level loaders. fallback: ReactNode = null ) { return forwardRef(function DefaultFallback(props, ref) { @@ -27,4 +33,10 @@ export function withSuspenseFallback( }); } +export function withPageSuspenseFallback( + Component: ComponentType +) { + return withSuspenseFallback(Component, DEFAULT_FALLBACK); +} + export default withSuspenseFallback; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx index f267f5d8b076..564262307742 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionWorkflowForm/IngestionWorkflowForm.tsx @@ -45,6 +45,7 @@ import { transformErrors } from '../../../../../utils/formPureUtils'; import { getSchemaByWorkflowType } from '../../../../../utils/IngestionWorkflowUtils'; import CoreInputWidget from '../../../../common/FormBuilderV1/widgets/CoreInputWidget'; import CoreSelectWidget from '../../../../common/FormBuilderV1/widgets/CoreSelectWidget'; +import Loader from '../../../../common/Loader/Loader'; const BooleanFieldTemplate = lazy( () => @@ -286,7 +287,7 @@ const IngestionWorkflowForm = forwardRef< }; return ( - + }> { /> )} - + }> {activeServiceStep === 2 && (
- + }>
{activeServiceStep === 1 && ( { /> )} - + }> {activeServiceStep === 2 && (
+ {null}}> Date: Sat, 4 Jul 2026 14:21:19 +0530 Subject: [PATCH 03/17] fix(ui): avoid lazy entity header title --- .../Entity/EntityHeader/EntityHeader.component.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx index 19bfcaf79c09..d29a43e261ba 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx @@ -12,16 +12,12 @@ */ import classNames from 'classnames'; -import { lazy, ReactNode } from 'react'; +import { ReactNode } from 'react'; import { EntityType } from '../../../enums/entity.enum'; import { getEntityLinkFromType } from '../../../utils/EntityLinkUtils'; -import withSuspenseFallback from '../../AppRouter/withSuspenseFallback'; import TitleBreadcrumb from '../../common/TitleBreadcrumb/TitleBreadcrumb.component'; import { TitleBreadcrumbProps } from '../../common/TitleBreadcrumb/TitleBreadcrumb.interface'; - -const EntityHeaderTitle = withSuspenseFallback( - lazy(() => import('../EntityHeaderTitle/EntityHeaderTitle.component')) -); +import EntityHeaderTitle from '../EntityHeaderTitle/EntityHeaderTitle.component'; interface Props { breadcrumb: TitleBreadcrumbProps['titleLinks']; From 735a060f1c2fbc314ee9eafcc000e05c8cbe7b58 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Sat, 4 Jul 2026 14:25:25 +0530 Subject: [PATCH 04/17] fix(ui): keep entity header title stable --- .../EntityHeaderTitle.component.tsx | 4 ++-- .../EntityHeaderTitle.test.tsx | 23 +++++++++++++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx index 3e6344a1e7d5..e3c72922b88a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx @@ -196,11 +196,11 @@ const EntityHeaderTitle = ({ entity: formattedEntityType, })}>
); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx index 9df9a037c587..1739ffb54186 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx @@ -21,13 +21,16 @@ import { useAppMode } from '../../hooks/useAppMode'; import { useAppRoutesRegistry } from '../../hooks/useAppRoutesRegistry'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; import Loader from '../common/Loader/Loader'; -import { withPageSuspenseFallback } from './withSuspenseFallback'; +import { + withPageSuspenseFallback, + withSuspenseFallback, +} from './withSuspenseFallback'; -const AuthenticatedApp = withPageSuspenseFallback( +const AuthenticatedApp = withSuspenseFallback( lazy(() => import('./AuthenticatedApp')) ); -const AuthenticatedRoutes = withPageSuspenseFallback( +const AuthenticatedRoutes = withSuspenseFallback( lazy(() => import('./AuthenticatedRoutes').then((m) => ({ default: m.AuthenticatedRoutes, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx index 137a4b58e5b2..2a4249d1f389 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx @@ -14,7 +14,10 @@ import type { CacheLocation } from '@auth0/auth0-react'; import type { IPublicClientApplication } from '@azure/msal-browser'; import { lazy, ReactNode } from 'react'; -import withSuspenseFallback from '../../AppRouter/withSuspenseFallback'; +import { + withPageSuspenseFallback, + withSuspenseFallback, +} from '../../AppRouter/withSuspenseFallback'; const Auth0ProviderComponent = withSuspenseFallback( lazy(() => @@ -34,7 +37,9 @@ const OktaAuthProviderComponent = withSuspenseFallback( ) ); -const BasicAuthProviderComponent = withSuspenseFallback( +// ponytail: withPageSuspenseFallback blocks form interaction while provider loads, +// preventing stub-context errors if user submits before BasicAuthProvider mounts. +const BasicAuthProviderComponent = withPageSuspenseFallback( lazy(() => import('./BasicAuthProvider')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx index a69253c59885..623b43f1a99b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx @@ -84,9 +84,11 @@ jest.mock('../../common/CustomPropertyTable/CustomPropertyTable', () => ({ )), })); -jest.mock('../../common/Loader/Loader', () => - jest.fn(() =>
Loading...
) -); +jest.mock('../../common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loading...
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../Customization/GenericProvider/GenericProvider', () => ({ GenericProvider: jest.fn(({ children }) => ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx index e731a585ec2a..faaa50ba4fa5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx @@ -81,9 +81,11 @@ jest.mock('../../common/CustomPropertyTable/CustomPropertyTable', () => ({ )), })); -jest.mock('../../common/Loader/Loader', () => - jest.fn(() =>
Loading...
) -); +jest.mock('../../common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loading...
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../Customization/GenericProvider/GenericProvider', () => ({ GenericProvider: jest.fn(({ children }) => ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx index 61a8dae32d15..c39ab2b77626 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx @@ -26,7 +26,6 @@ import { useApplicationStore } from '../../../../hooks/useApplicationStore'; import { getInstalledApplicationList } from '../../../../rest/applicationAPI'; import { getMcpChatEnabled } from '../../../../rest/mcpClientAPI'; import { ExtensionPointRegistry } from '../../../../utils/ExtensionPointRegistry'; -import Loader from '../../../common/Loader/Loader'; import applicationsClassBase from '../AppDetails/ApplicationsClassBase'; import type { AppPlugin } from '../plugins/AppPlugin'; import { McpChatPlugin } from '../plugins/McpChatPlugin'; @@ -37,7 +36,6 @@ export const ApplicationsContext = createContext({} as ApplicationsContextType); export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { const [applications, setApplications] = useState([]); const [mcpChatEnabled, setMcpChatEnabled] = useState(false); - const [loading, setLoading] = useState(true); const { permissions } = usePermissionProvider(); const { setApplicationsName, setApplicationsLoaded } = useApplicationStore(); @@ -46,7 +44,6 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { const fetchApplicationList = useCallback(async () => { try { - setLoading(true); const data = await getInstalledApplicationList(); setApplications(data); @@ -57,7 +54,6 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { } catch { // do not handle error } finally { - setLoading(false); // Signal to downstream consumers (plugins, mode-aware code) that // `applications` reflects server state. Set unconditionally — // even on fetch error the list is "as loaded as it's going to @@ -70,7 +66,6 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { if (!isEmpty(permissions)) { fetchApplicationList(); } else { - setLoading(false); // No permissions to fetch — applications stays `[]` but the // "loaded" signal still needs to flip so downstream consumers // gating on it don't wait forever. @@ -125,7 +120,7 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { return ( - {loading ? : children} + {children} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx index 4920741e15ae..7eb0b6f514d4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx @@ -173,9 +173,11 @@ jest.mock('../../context/LineageProvider/LineageProvider', () => jest.fn().mockReturnValue(<>LineageProvider) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockReturnValue(
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/PageLayoutV1/PageLayoutV1', () => jest.fn().mockImplementation(({ children }) => <>{children}) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx index 0c2b0a0788f9..2f4754cdc04e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx @@ -98,9 +98,11 @@ jest.mock( ) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../context/PermissionProvider/PermissionProvider', () => ({ usePermissionProvider: jest.fn().mockImplementation(() => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx index 7e8cb384d46f..a1ffdf2f9111 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx @@ -155,9 +155,11 @@ jest.mock('../../utils/ToastUtils', () => ({ .mockImplementation(({ children }) =>
{children}
), })); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
testLoader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.fn().mockImplementation(() =>

ErrorPlaceHolder

) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx index 3fe4f332bf69..21869e0c0250 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx @@ -212,9 +212,11 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => ) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ withActivityFeed: jest.fn().mockImplementation((Component) => Component), diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx index fd74dc71dc52..118fbcfb113a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx @@ -204,9 +204,11 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => ) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ withActivityFeed: jest.fn().mockImplementation((Component) => Component), diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx index e16039741d5e..165f3152fe0f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx @@ -131,9 +131,11 @@ jest.mock('../../../components/PageLayoutV1/PageLayoutV1', () =>
{children}
)) ); -jest.mock('../../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock( '../../../components/DataQuality/IncidentManager/IncidentManagerPageHeader/IncidentManagerPageHeader.component', () => jest.fn().mockImplementation(() =>
IncidentManagerPageHeader
) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx index d1823f21c8e2..b0c5502b3b2e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx @@ -123,9 +123,11 @@ jest.mock('react-router-dom', () => ({ useLocation: jest.fn().mockImplementation(() => ({ pathname: 'mockPath' })), })); -jest.mock('../../components/common/Loader/Loader', () => { - return jest.fn().mockImplementation(() => <>testLoader); -}); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() => <>testLoader), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('./SearchIndexFieldsTab/SearchIndexFieldsTab', () => { return jest.fn().mockImplementation(() =>

testSearchIndexFieldsTab

); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx index 37d74985dcab..988468f43a15 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx @@ -439,9 +439,11 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => )) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); // Additional missing component mocks jest.mock( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx index 81428722667a..f2d1929499c8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx @@ -211,9 +211,11 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => ) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ withActivityFeed: jest.fn().mockImplementation((Component) => Component), diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx index 16ebcc88e832..f3ee70ea4156 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx @@ -145,9 +145,11 @@ jest.mock('react-router-dom', () => ({ useLocation: jest.fn().mockImplementation(() => ({ pathname: 'mockPath' })), })); -jest.mock('../../components/common/Loader/Loader', () => { - return jest.fn().mockImplementation(() => <>testLoader); -}); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() => <>testLoader), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../hoc/LimitWrapper', () => { return jest.fn().mockImplementation(({ children }) =>

{children}

); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx index bbc05cb5830b..90e403a28be4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx @@ -304,9 +304,11 @@ jest.mock('../../context/TourProvider/TourProvider', () => ({ })), })); -jest.mock('../../components/common/Loader/Loader', () => { - return jest.fn().mockImplementation(() => <>testLoader); -}); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() => <>testLoader), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.useFakeTimers(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx index 9ef016d8c8a6..600c6bb34511 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx @@ -215,9 +215,11 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => ) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ withActivityFeed: jest.fn().mockImplementation((Component) => Component), diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts index 86a54705c607..e13a470aa135 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts @@ -13,10 +13,10 @@ import { FC, lazy } from 'react'; import { UnAuthenticatedAppRouter } from '../components/AppRouter/UnAuthenticatedAppRouter'; -import { withPageSuspenseFallback } from '../components/AppRouter/withSuspenseFallback'; +import { withSuspenseFallback } from '../components/AppRouter/withSuspenseFallback'; import { UNPROTECTED_ROUTES } from '../constants/router.constants'; -const AuthenticatedAppRouter = withPageSuspenseFallback( +const AuthenticatedAppRouter = withSuspenseFallback( lazy(() => import('../components/AppRouter/AuthenticatedAppRouter')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx index 6bfa0f82cea0..d8b53f7884e9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx @@ -212,7 +212,7 @@ export const getContainerDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - + Date: Mon, 6 Jul 2026 13:14:38 +0530 Subject: [PATCH 07/17] address comments --- .../IncidentManagerDetailPage/IncidentManagerDetailPage.tsx | 2 +- .../main/resources/ui/src/utils/ApplicationRoutesClassBase.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx index b5b81ec06b6f..bdee9db1dc0b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.tsx @@ -180,7 +180,7 @@ const IncidentManagerDetailPage = ({ activeTitle: true, }, ]; - }, [testCase, isDimensionPage, dimensionKey, t]); + }, [testCase, testCaseFQN, activeTab, isDimensionPage, dimensionKey, t]); const breadcrumbItems = useMemo( () => diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts index e13a470aa135..86a54705c607 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts @@ -13,10 +13,10 @@ import { FC, lazy } from 'react'; import { UnAuthenticatedAppRouter } from '../components/AppRouter/UnAuthenticatedAppRouter'; -import { withSuspenseFallback } from '../components/AppRouter/withSuspenseFallback'; +import { withPageSuspenseFallback } from '../components/AppRouter/withSuspenseFallback'; import { UNPROTECTED_ROUTES } from '../constants/router.constants'; -const AuthenticatedAppRouter = withSuspenseFallback( +const AuthenticatedAppRouter = withPageSuspenseFallback( lazy(() => import('../components/AppRouter/AuthenticatedAppRouter')) ); From ece3846d988be5b7f2178a73ae7595968183b60f Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 13:26:20 +0530 Subject: [PATCH 08/17] address comments --- .../ActivityFeedTab/ActivityFeedTab.component.tsx | 2 +- .../resources/ui/src/components/AppRouter/AppRouter.tsx | 9 +++------ .../Auth/AuthProviders/LazyAuthProviderWrappers.tsx | 4 ++-- .../DriveService/Directory/DirectoryDetails.test.tsx | 8 ++++++-- .../components/DriveService/File/FileDetails.test.tsx | 8 ++++++-- .../ui/src/pages/ContainerPage/ContainerPage.test.tsx | 8 ++++++-- .../ui/src/pages/DataModelPage/DataModelPage.test.tsx | 8 ++++++-- .../pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx | 8 ++++++-- .../DirectoryDetailsPage/DirectoryDetailsPage.test.tsx | 8 ++++++-- .../src/pages/FileDetailsPage/FileDetailsPage.test.tsx | 8 ++++++-- .../IncidentManagerDetailPage.test.tsx | 8 ++++++-- .../SearchIndexDetailsPage.test.tsx | 4 +++- .../pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx | 8 ++++++-- .../SpreadsheetDetailsPage.test.tsx | 8 ++++++-- .../pages/StoredProcedure/StoredProcedurePage.test.tsx | 4 +++- .../pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx | 4 +++- .../WorksheetDetailsPage/WorksheetDetailsPage.test.tsx | 8 ++++++-- 17 files changed, 81 insertions(+), 34 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx index e83ecbeffd40..63d4c7619239 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx @@ -884,7 +884,7 @@ export const ActivityFeedTab = ({ })}> {selectedThread || selectedTask || selectedActivity ? ( getRightPanelContent() - ) : ( + ) : !loading ? (
} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx index 1739ffb54186..9df9a037c587 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx @@ -21,16 +21,13 @@ import { useAppMode } from '../../hooks/useAppMode'; import { useAppRoutesRegistry } from '../../hooks/useAppRoutesRegistry'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; import Loader from '../common/Loader/Loader'; -import { - withPageSuspenseFallback, - withSuspenseFallback, -} from './withSuspenseFallback'; +import { withPageSuspenseFallback } from './withSuspenseFallback'; -const AuthenticatedApp = withSuspenseFallback( +const AuthenticatedApp = withPageSuspenseFallback( lazy(() => import('./AuthenticatedApp')) ); -const AuthenticatedRoutes = withSuspenseFallback( +const AuthenticatedRoutes = withPageSuspenseFallback( lazy(() => import('./AuthenticatedRoutes').then((m) => ({ default: m.AuthenticatedRoutes, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx index 2a4249d1f389..0c9d44d70548 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx @@ -37,8 +37,8 @@ const OktaAuthProviderComponent = withSuspenseFallback( ) ); -// ponytail: withPageSuspenseFallback blocks form interaction while provider loads, -// preventing stub-context errors if user submits before BasicAuthProvider mounts. +// withPageSuspenseFallback blocks form interaction while the provider loads, +// preventing stub-context errors if the user submits before BasicAuthProvider mounts. const BasicAuthProviderComponent = withPageSuspenseFallback( lazy(() => import('./BasicAuthProvider')) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx index 623b43f1a99b..189c0dcedc61 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.test.tsx @@ -86,8 +86,12 @@ jest.mock('../../common/CustomPropertyTable/CustomPropertyTable', () => ({ jest.mock('../../common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loading...
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loading...
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../Customization/GenericProvider/GenericProvider', () => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx index faaa50ba4fa5..76c51eb721e0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.test.tsx @@ -83,8 +83,12 @@ jest.mock('../../common/CustomPropertyTable/CustomPropertyTable', () => ({ jest.mock('../../common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loading...
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loading...
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../Customization/GenericProvider/GenericProvider', () => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx index 7eb0b6f514d4..6f6438a39465 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.test.tsx @@ -175,8 +175,12 @@ jest.mock('../../context/LineageProvider/LineageProvider', () => jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../components/PageLayoutV1/PageLayoutV1', () => diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx index 2f4754cdc04e..e2e82712a03c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelPage.test.tsx @@ -100,8 +100,12 @@ jest.mock( jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../context/PermissionProvider/PermissionProvider', () => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx index a1ffdf2f9111..13f81b66dd39 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx @@ -157,8 +157,12 @@ jest.mock('../../utils/ToastUtils', () => ({ jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx index 21869e0c0250..bb1fc97de578 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DirectoryDetailsPage/DirectoryDetailsPage.test.tsx @@ -214,8 +214,12 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx index 118fbcfb113a..ad9b512a18fc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/FileDetailsPage/FileDetailsPage.test.tsx @@ -206,8 +206,12 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx index 165f3152fe0f..15f7a8a29e0b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerDetailPage/IncidentManagerDetailPage.test.tsx @@ -133,8 +133,12 @@ jest.mock('../../../components/PageLayoutV1/PageLayoutV1', () => ); jest.mock('../../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock( '../../../components/DataQuality/IncidentManager/IncidentManagerPageHeader/IncidentManagerPageHeader.component', diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx index b0c5502b3b2e..0c5431bc667b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexDetailsPage.test.tsx @@ -126,7 +126,9 @@ jest.mock('react-router-dom', () => ({ jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, default: jest.fn().mockImplementation(() => <>testLoader), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('./SearchIndexFieldsTab/SearchIndexFieldsTab', () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx index 988468f43a15..2ab6c111a054 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.test.tsx @@ -441,8 +441,12 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); // Additional missing component mocks diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx index f2d1929499c8..ed257db04abc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SpreadsheetDetailsPage/SpreadsheetDetailsPage.test.tsx @@ -213,8 +213,12 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx index f3ee70ea4156..a4f6222afcae 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedurePage.test.tsx @@ -148,7 +148,9 @@ jest.mock('react-router-dom', () => ({ jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, default: jest.fn().mockImplementation(() => <>testLoader), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../hoc/LimitWrapper', () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx index 90e403a28be4..e81306c92ac8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.test.tsx @@ -307,7 +307,9 @@ jest.mock('../../context/TourProvider/TourProvider', () => ({ jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, default: jest.fn().mockImplementation(() => <>testLoader), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.useFakeTimers(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx index 600c6bb34511..e1724223f0ee 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/WorksheetDetailsPage/WorksheetDetailsPage.test.tsx @@ -217,8 +217,12 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.mock('../../components/common/Loader/Loader', () => ({ __esModule: true, - default: jest.fn().mockImplementation(() =>
Loader
), - PageLoader: jest.fn().mockImplementation(() =>
Loader
), + default: jest + .fn() + .mockImplementation(() =>
Loader
), + PageLoader: jest + .fn() + .mockImplementation(() =>
Loader
), })); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ From 9a9a2f2795ace11067fa310bb346ce0e740feb2c Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 13:36:06 +0530 Subject: [PATCH 09/17] nit --- .../ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx index 63d4c7619239..ac85b5ccf4e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx @@ -894,7 +894,7 @@ export const ActivityFeedTab = ({
- )} + ) : null}
); From 32240b09f08122241c735eb4bad3f267a3b0bb70 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 13:49:02 +0530 Subject: [PATCH 10/17] address comments --- .../ActivityFeedTab.component.tsx | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx index ac85b5ccf4e7..e05483a7ca26 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx @@ -882,19 +882,20 @@ export const ActivityFeedTab = ({ 'three-panel-layout': layoutType === ActivityFeedLayoutType.THREE_PANEL, })}> - {selectedThread || selectedTask || selectedActivity ? ( - getRightPanelContent() - ) : !loading ? ( -
- } - type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> - - {getRightPanelPlaceholder} - - -
- ) : null} + {loader} + {(selectedThread || selectedTask || selectedActivity) && !loading + ? getRightPanelContent() + : !loading && ( +
+ } + type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> + + {getRightPanelPlaceholder} + + +
+ )}
); From 588561ebfafc25a14d72edd79ce0a5d82e9c568f Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 17:39:43 +0530 Subject: [PATCH 11/17] address comments --- .../components/AppRouter/withSuspenseFallback.tsx | 4 ++-- .../ApplicationsProvider/ApplicationsProvider.tsx | 14 ++++++-------- .../APICollectionPage/APICollectionPage.test.tsx | 8 +++++--- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx index 27760ef219a6..eddf4573f410 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx @@ -12,7 +12,7 @@ */ import { ComponentType, forwardRef, ReactNode, Suspense } from 'react'; -import { PageLoader } from '../common/Loader/Loader'; +import Loader from '../common/Loader/Loader'; export function withSuspenseFallback( Component: ComponentType, @@ -31,7 +31,7 @@ export function withSuspenseFallback( export function withPageSuspenseFallback( Component: ComponentType ) { - return withSuspenseFallback(Component, ); + return withSuspenseFallback(Component, ); } export default withSuspenseFallback; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx index c39ab2b77626..b23c074672f5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx @@ -26,6 +26,7 @@ import { useApplicationStore } from '../../../../hooks/useApplicationStore'; import { getInstalledApplicationList } from '../../../../rest/applicationAPI'; import { getMcpChatEnabled } from '../../../../rest/mcpClientAPI'; import { ExtensionPointRegistry } from '../../../../utils/ExtensionPointRegistry'; +import Loader from '../../../common/Loader/Loader'; import applicationsClassBase from '../AppDetails/ApplicationsClassBase'; import type { AppPlugin } from '../plugins/AppPlugin'; import { McpChatPlugin } from '../plugins/McpChatPlugin'; @@ -35,6 +36,7 @@ export const ApplicationsContext = createContext({} as ApplicationsContextType); export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { const [applications, setApplications] = useState([]); + const [loading, setLoading] = useState(true); const [mcpChatEnabled, setMcpChatEnabled] = useState(false); const { permissions } = usePermissionProvider(); const { setApplicationsName, setApplicationsLoaded } = useApplicationStore(); @@ -44,6 +46,7 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { const fetchApplicationList = useCallback(async () => { try { + setLoading(true); const data = await getInstalledApplicationList(); setApplications(data); @@ -54,10 +57,7 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { } catch { // do not handle error } finally { - // Signal to downstream consumers (plugins, mode-aware code) that - // `applications` reflects server state. Set unconditionally — - // even on fetch error the list is "as loaded as it's going to - // be" and consumers should stop waiting. + setLoading(false); setApplicationsLoaded(true); } }, []); @@ -66,9 +66,7 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { if (!isEmpty(permissions)) { fetchApplicationList(); } else { - // No permissions to fetch — applications stays `[]` but the - // "loaded" signal still needs to flip so downstream consumers - // gating on it don't wait forever. + setLoading(false); setApplicationsLoaded(true); } }, [permissions]); @@ -120,7 +118,7 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => { return ( - {children} + {loading ? : children} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.test.tsx index 972fb8177a58..c6596fbf14e5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.test.tsx @@ -86,9 +86,11 @@ jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () => jest.fn().mockImplementation(() =>
ErrorPlaceHolder
) ); -jest.mock('../../components/common/Loader/Loader', () => - jest.fn().mockImplementation(() =>
Loader
) -); +jest.mock('../../components/common/Loader/Loader', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() =>
Loader
), + PageLoader: jest.fn().mockImplementation(() =>
Loader
), +})); jest.mock('../../components/AppRouter/withActivityFeed', () => ({ withActivityFeed: jest.fn().mockImplementation((Component) => Component), From 6a9b770e556d3dc44d1929cc68952bf4c90ff8bb Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 17:57:28 +0530 Subject: [PATCH 12/17] address comments --- .../main/resources/ui/src/utils/EntityDetailComponentUtils.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityDetailComponentUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityDetailComponentUtils.tsx index 04418d7de24c..80095688f8ca 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityDetailComponentUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityDetailComponentUtils.tsx @@ -12,6 +12,7 @@ */ import { ComponentType, FC, lazy, LazyExoticComponent, Suspense } from 'react'; +import Loader from '../components/common/Loader/Loader'; import { EntityType } from '../enums/entity.enum'; const lazyComponentMap: Partial< @@ -90,7 +91,7 @@ export function getEntityDetailComponent(entityType: string): FC | null { } const WrappedComponent: FC = (props) => ( - + }> ); From 4728e54014e7b7dea3ec167fad0f974018c47f40 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 22:21:08 +0530 Subject: [PATCH 13/17] fix failing tests --- .../playwright/utils/customizeLandingPage.ts | 18 +++++++ .../resources/ui/playwright/utils/domain.ts | 26 +++++++--- .../Directory/DirectoryDetails.tsx | 15 +++--- .../DriveService/File/FileDetails.tsx | 15 +++--- .../Spreadsheet/SpreadsheetDetails.tsx | 15 +++--- .../Worksheet/WorksheetDetails.tsx | 15 +++--- .../DataProductsWidget.component.tsx | 2 +- .../TopicDetails/TopicDetails.component.tsx | 15 +++--- .../LazyTabContent/LazyTabContent.test.tsx | 47 ------------------- .../common/LazyTabContent/LazyTabContent.tsx | 41 ---------------- .../TableDetailsPageSkeleton.component.tsx | 5 +- .../utils/APIEndpoints/APIEndpointUtils.tsx | 15 +++--- .../ui/src/utils/ChartDetailsUtils.tsx | 15 +++--- .../ui/src/utils/ContainerDetailUtils.tsx | 15 +++--- .../ui/src/utils/DashboardDataModelUtils.tsx | 15 +++--- .../ui/src/utils/DashboardDetailsUtils.tsx | 15 +++--- .../utils/MetricEntityUtils/MetricUtils.tsx | 15 +++--- .../ui/src/utils/MlModelDetailsUtils.tsx | 15 +++--- .../ui/src/utils/PipelineDetailsUtils.tsx | 15 +++--- .../ui/src/utils/SearchIndexUtils.tsx | 15 +++--- .../ui/src/utils/StoredProceduresUtils.tsx | 15 +++--- .../resources/ui/src/utils/TableTabsUtils.tsx | 41 +++++++--------- 22 files changed, 150 insertions(+), 255 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts index 3f13e846cc1d..021f3459dcb0 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts @@ -238,6 +238,12 @@ const isLandingPageWidgetVisible = async ( return false; }; +const isLandingPageWidgetLoading = async (widget: Locator) => + widget + .getByTestId('entity-list-skeleton') + .isVisible() + .catch(() => false); + export const waitForLandingPageWidget = async ( page: Page, widgetKey: string @@ -730,6 +736,10 @@ export const verifyDomainCountInDomainWidget = async ( } const domainWidget = page.getByTestId('KnowledgePanel.Domains'); + if (await isLandingPageWidgetLoading(domainWidget)) { + return null; + } + const card = domainWidget.locator(widgetCardSelector).first(); const isCardVisible = await card.isVisible().catch(() => false); @@ -771,6 +781,10 @@ export const verifyDataProductCountInDataProductWidget = async ( const dataProductWidget = page.getByTestId( 'KnowledgePanel.DataProducts' ); + if (await isLandingPageWidgetLoading(dataProductWidget)) { + return null; + } + const card = dataProductWidget.locator(widgetCardSelector).first(); const isCardVisible = await card.isVisible().catch(() => false); @@ -798,6 +812,10 @@ export const verifyWidgetCountOnCurrentPage = async ( await expect .poll( async () => { + if (await isLandingPageWidgetLoading(widget)) { + return null; + } + const element = widget.locator(selector).first(); const isVisible = await element.isVisible().catch(() => false); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts index 934ace23fec4..ae7db39b4a70 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts @@ -63,6 +63,21 @@ const waitForSearchDebounce = async (page: Page) => { } }; +const clickAvailableWidgetAction = async ( + addBtn: Locator, + editBtn: Locator +) => { + await addBtn.or(editBtn).first().waitFor({ state: 'visible' }); + + if (await addBtn.isVisible()) { + await addBtn.click(); + + return; + } + + await editBtn.click(); +}; + export const addTierWidget = async ( page: Page, tier: string, @@ -70,8 +85,7 @@ export const addTierWidget = async ( ) => { const addBtn = page.getByTestId('add-tier'); const editBtn = page.getByTestId('edit-tier'); - const isAdd = await addBtn.isVisible(); - await (isAdd ? addBtn : editBtn).click(); + await clickAvailableWidgetAction(addBtn, editBtn); await waitForAllLoadersToDisappear(page); @@ -106,8 +120,7 @@ export const addCertificationWidget = async ( ) => { const addBtn = page.getByTestId('add-certification'); const editBtn = page.getByTestId('edit-certification'); - const isAdd = await addBtn.isVisible(); - await (isAdd ? addBtn : editBtn).click(); + await clickAvailableWidgetAction(addBtn, editBtn); await page.locator('.certification-card-popover').waitFor({ state: 'visible', @@ -569,8 +582,7 @@ export const fillCommonFormItems = async ( export const fillDomainForm = async ( page: Page, - entity: Domain['data'] | SubDomain['data'], - isDomain = true + entity: Domain['data'] | SubDomain['data'] ) => { await fillCommonFormItems(page, entity); @@ -721,7 +733,7 @@ export const createSubDomain = async ( await expect(page.getByText('Add Sub Domain')).toBeVisible(); - await fillDomainForm(page, subDomain, false); + await fillDomainForm(page, subDomain); const saveRes = page.waitForResponse('/api/v1/domains'); await page.getByTestId('save-btn').click(); await saveRes; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx index 8c5e2c410c6e..f64a9d68ae14 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx @@ -62,7 +62,6 @@ import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/Activ import { withActivityFeed } from '../../AppRouter/withActivityFeed'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; -import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -356,14 +355,12 @@ function DirectoryDetails({ /> ), lineageTab: ( - - - + ), customPropertiesTab: directoryDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx index 2c013269a11b..90e5e08f5445 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx @@ -60,7 +60,6 @@ import { ActivityFeedTab } from '../../ActivityFeed/ActivityFeedTab/ActivityFeed import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; -import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -325,14 +324,12 @@ function FileDetails({ /> ), lineageTab: ( - - - + ), customPropertiesTab: fileDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx index 61e73badda09..c4bec14aa9b5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx @@ -60,7 +60,6 @@ import { ActivityFeedTab } from '../../ActivityFeed/ActivityFeedTab/ActivityFeed import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; -import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -338,14 +337,12 @@ function SpreadsheetDetails({ /> ), lineageTab: ( - - - + ), customPropertiesTab: spreadsheetDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx index a9707d7291e0..73328953a113 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx @@ -59,7 +59,6 @@ import { ActivityFeedTab } from '../../ActivityFeed/ActivityFeedTab/ActivityFeed import { ActivityFeedLayoutType } from '../../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import { CustomPropertyTable } from '../../common/CustomPropertyTable/CustomPropertyTable'; import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton'; -import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import { GenericProvider } from '../../Customization/GenericProvider/GenericProvider'; import { DataAssetsHeader } from '../../DataAssets/DataAssetsHeader/DataAssetsHeader.component'; @@ -337,14 +336,12 @@ function WorksheetDetails({ /> ), lineageTab: ( - - - + ), customPropertiesTab: worksheetDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataProductsWidget/DataProductsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataProductsWidget/DataProductsWidget.component.tsx index dca3010a5283..4fdf9b15bebd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataProductsWidget/DataProductsWidget.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataProductsWidget/DataProductsWidget.component.tsx @@ -219,7 +219,7 @@ const DataProductsWidget = ({
), - [dataProducts, isFullSize] + [assetsCounts, dataProducts, handleDataProductClick, isFullSize] ); const showWidgetFooterMoreButton = useMemo( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx index 41e698026d43..3d76300f16fe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx @@ -67,7 +67,6 @@ import type { ExtentionEntitiesKeys, } from '../../common/CustomPropertyTable/CustomPropertyTable.interface'; import type { IconButtonProps } from '../../common/IconButtons/EditIconButton'; -import { LazyTabContent } from '../../common/LazyTabContent/LazyTabContent'; import Loader from '../../common/Loader/Loader'; import type { GenericProviderProps } from '../../Customization/GenericProvider/GenericProvider.interface'; import type { EntityName } from '../../Modals/EntityNameModal/EntityNameModal.interface'; @@ -434,14 +433,12 @@ const TopicDetails: React.FC = ({ /> ), lineageTab: ( - - - + ), customPropertiesTab: topicDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx deleted file mode 100644 index b54d6cdeaeb5..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright 2026 Collate. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { render, screen } from '@testing-library/react'; -import { lazy } from 'react'; -import { EntityTabs } from '../../../enums/entity.enum'; -import { LazyTabContent } from './LazyTabContent'; - -describe('LazyTabContent', () => { - const LazyChild = lazy(() => - Promise.resolve({ - default: () =>
Loaded active tab
, - }) - ); - - it('does not render fallback or child for inactive tabs', () => { - render( - - - - ); - - expect(screen.queryByTestId('active-tab-loader')).not.toBeInTheDocument(); - expect(screen.queryByText('Loaded active tab')).not.toBeInTheDocument(); - }); - - it('renders fallback while the active tab chunk is loading', async () => { - render( - - - - ); - - expect(screen.getByTestId('active-tab-loader')).toBeInTheDocument(); - expect(await screen.findByText('Loaded active tab')).toBeInTheDocument(); - }); -}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx deleted file mode 100644 index 210265d9ad86..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/LazyTabContent/LazyTabContent.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright 2026 Collate. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { ReactNode, Suspense } from 'react'; -import { EntityTabs } from '../../../enums/entity.enum'; -import Loader from '../Loader/Loader'; - -interface LazyTabContentProps { - activeTab: EntityTabs; - children: ReactNode; - fallback?: ReactNode; - tab: EntityTabs; -} - -export const LazyTabContent = ({ - activeTab, - children, - fallback = ( -
- -
- ), - tab, -}: LazyTabContentProps) => { - // Keep inactive lazy tabs unmounted so their chunks cannot flash fallback UI. - if (activeTab !== tab) { - return null; - } - - return {children}; -}; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageSkeleton.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageSkeleton.component.tsx index 6fd897666117..b8f7ded14071 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageSkeleton.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageSkeleton.component.tsx @@ -27,7 +27,10 @@ import { Card, Col, Row, Skeleton, Space } from 'antd'; */ export const TableDetailsPageSkeleton = () => { return ( - + - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx index 20f7403842ce..15d57581a0f9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx @@ -20,7 +20,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -126,14 +125,12 @@ export const getChartDetailPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx index d8b53f7884e9..da510e74439b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx @@ -21,7 +21,6 @@ import type { ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { ContainerWidget } from '../components/Container/ContainerWidget/ContainerWidget'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -212,14 +211,12 @@ export const getContainerDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx index c5baf736208a..3f859f7ebb63 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx @@ -19,7 +19,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -176,14 +175,12 @@ export const getDashboardDataModelDetailPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx index 84e27f4d3503..423a3a8846e0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx @@ -20,7 +20,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import type { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import type { ChartType } from '../components/Dashboard/DashboardDetails/DashboardDetails.interface'; import type { SourceType } from '../components/SearchedData/SearchedData.interface'; @@ -174,14 +173,12 @@ export const getDashboardDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx index 2104fea72ca9..e40b2c90dbc5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx @@ -18,7 +18,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../../components/common/LazyTabContent/LazyTabContent'; import type { SourceType } from '../../components/SearchedData/SearchedData.interface'; import { DetailPageWidgetKeys } from '../../enums/CustomizeDetailPage.enum'; import { EntityTabs, EntityType } from '../../enums/entity.enum'; @@ -154,14 +153,12 @@ export const getMetricDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx index a72dc2aa8cd5..512c80b8bf22 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx @@ -19,7 +19,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -148,14 +147,12 @@ export const getMlModelDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx index 4e61bb27298f..9b4682948ab3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx @@ -22,7 +22,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -167,14 +166,12 @@ export const getPipelineDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx index 87e1f9e40648..3886be332476 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx @@ -20,7 +20,6 @@ import type { ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -186,14 +185,12 @@ export const getSearchIndexDetailsTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx index c15d3d47b0c4..85e3ad6659b5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx @@ -18,7 +18,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -126,14 +125,12 @@ export const getStoredProcedureDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx index 8cdacc7b4e4c..6735564079a0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx @@ -20,7 +20,6 @@ import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; -import { LazyTabContent } from '../components/common/LazyTabContent/LazyTabContent'; import type { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import type { SourceType } from '../components/SearchedData/SearchedData.interface'; import { NO_DATA_PLACEHOLDER } from '../constants/constants'; @@ -291,14 +290,12 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - - - + ), }, { @@ -315,20 +312,18 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.KNOWLEDGE_GRAPH, children: ( - - - + ), isHidden: !useApplicationStore.getState().rdfEnabled, }, From ce7c1b6e4afc0e1f6a83f564407b032dd23c0150 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Mon, 6 Jul 2026 23:06:42 +0530 Subject: [PATCH 14/17] revert --- .../Directory/DirectoryDetails.tsx | 23 +++++--- .../DriveService/File/FileDetails.tsx | 23 +++++--- .../Spreadsheet/SpreadsheetDetails.tsx | 23 +++++--- .../Worksheet/WorksheetDetails.tsx | 23 +++++--- .../TopicDetails/TopicDetails.component.tsx | 12 ++-- .../utils/APIEndpoints/APIEndpointUtils.tsx | 17 +++--- .../ui/src/utils/ChartDetailsUtils.tsx | 17 +++--- .../ui/src/utils/ContainerDetailUtils.tsx | 17 +++--- .../ui/src/utils/DashboardDataModelUtils.tsx | 17 +++--- .../ui/src/utils/DashboardDetailsUtils.tsx | 17 +++--- .../utils/MetricEntityUtils/MetricUtils.tsx | 17 +++--- .../ui/src/utils/MlModelDetailsUtils.tsx | 8 ++- .../ui/src/utils/PipelineDetailsUtils.tsx | 8 ++- .../ui/src/utils/SearchIndexUtils.tsx | 17 +++--- .../ui/src/utils/StoredProceduresUtils.tsx | 17 +++--- .../resources/ui/src/utils/TableTabsUtils.tsx | 55 +++++++++++-------- 16 files changed, 193 insertions(+), 118 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx index f64a9d68ae14..d3759607e357 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Directory/DirectoryDetails.tsx @@ -14,7 +14,14 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; +import { + lazy, + Suspense, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -355,12 +362,14 @@ function DirectoryDetails({ /> ), lineageTab: ( - + }> + + ), customPropertiesTab: directoryDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx index 90e5e08f5445..07d8d002c081 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/File/FileDetails.tsx @@ -13,7 +13,14 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; +import { + lazy, + Suspense, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -324,12 +331,14 @@ function FileDetails({ /> ), lineageTab: ( - + }> + + ), customPropertiesTab: fileDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx index c4bec14aa9b5..78538c7fbdbe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Spreadsheet/SpreadsheetDetails.tsx @@ -13,7 +13,14 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; +import { + lazy, + Suspense, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -337,12 +344,14 @@ function SpreadsheetDetails({ /> ), lineageTab: ( - + }> + + ), customPropertiesTab: spreadsheetDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx index 73328953a113..f93152012e59 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DriveService/Worksheet/WorksheetDetails.tsx @@ -13,7 +13,14 @@ import { Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import { EntityTags } from 'Models'; -import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; +import { + lazy, + Suspense, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants'; @@ -336,12 +343,14 @@ function WorksheetDetails({ /> ), lineageTab: ( - + }> + + ), customPropertiesTab: worksheetDetails && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx index 3d76300f16fe..6f53fc57e70a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicDetails/TopicDetails.component.tsx @@ -124,10 +124,14 @@ const SampleDataWithMessages = withSuspenseFallback( ) ); -const EntityLineageTab = lazy(() => - import('../../Lineage/EntityLineageTab/EntityLineageTab').then((module) => ({ - default: module.EntityLineageTab, - })) +const EntityLineageTab = withSuspenseFallback( + lazy(() => + import('../../Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ + default: module.EntityLineageTab, + }) + ) + ) ); const QueryViewer = withSuspenseFallback( diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/APIEndpoints/APIEndpointUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/APIEndpoints/APIEndpointUtils.tsx index 9b98c58ceedf..9c9d292e522c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/APIEndpoints/APIEndpointUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/APIEndpoints/APIEndpointUtils.tsx @@ -11,13 +11,14 @@ * limitations under the License. */ import { get } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../../components/common/Loader/Loader'; import type { SourceType } from '../../components/SearchedData/SearchedData.interface'; import { DetailPageWidgetKeys } from '../../enums/CustomizeDetailPage.enum'; import { EntityTabs, EntityType } from '../../enums/entity.enum'; @@ -142,12 +143,14 @@ export const getApiEndpointDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx index 15d57581a0f9..bf29cbfee262 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ChartDetailsUtils.tsx @@ -13,13 +13,14 @@ import { t } from 'i18next'; import { get } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../components/common/Loader/Loader'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -125,12 +126,14 @@ export const getChartDetailPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx index da510e74439b..b6c0051c6be4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ContainerDetailUtils.tsx @@ -13,7 +13,7 @@ import { Col, Row } from 'antd'; import { get } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { @@ -21,6 +21,7 @@ import type { ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; +import Loader from '../components/common/Loader/Loader'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { ContainerWidget } from '../components/Container/ContainerWidget/ContainerWidget'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -211,12 +212,14 @@ export const getContainerDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx index 3f859f7ebb63..033f155d1ab8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDataModelUtils.tsx @@ -12,13 +12,14 @@ */ import { Card } from 'antd'; import { get } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../components/common/Loader/Loader'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; @@ -175,12 +176,14 @@ export const getDashboardDataModelDetailPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx index 423a3a8846e0..15fa8e2a79e3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DashboardDetailsUtils.tsx @@ -13,13 +13,14 @@ import { AxiosError } from 'axios'; import { get } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../components/common/Loader/Loader'; import type { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import type { ChartType } from '../components/Dashboard/DashboardDetails/DashboardDetails.interface'; import type { SourceType } from '../components/SearchedData/SearchedData.interface'; @@ -173,12 +174,14 @@ export const getDashboardDetailPageTabs = ({ label: , key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx index e40b2c90dbc5..71e8e9866dd2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/MetricEntityUtils/MetricUtils.tsx @@ -11,13 +11,14 @@ * limitations under the License. */ -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../../components/common/Loader/Loader'; import type { SourceType } from '../../components/SearchedData/SearchedData.interface'; import { DetailPageWidgetKeys } from '../../enums/CustomizeDetailPage.enum'; import { EntityTabs, EntityType } from '../../enums/entity.enum'; @@ -153,12 +154,14 @@ export const getMetricDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx index 512c80b8bf22..ec1b23a09402 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/MlModelDetailsUtils.tsx @@ -58,9 +58,11 @@ const ContractTab = withSuspenseFallback( ) ); -const EntityLineageTab = lazy(() => - import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ default: module.EntityLineageTab }) +const EntityLineageTab = withSuspenseFallback( + lazy(() => + import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ default: module.EntityLineageTab }) + ) ) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx index 9b4682948ab3..12e4ad76d392 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx @@ -66,9 +66,11 @@ const ContractTab = withSuspenseFallback( ) ); -const EntityLineageTab = lazy(() => - import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ default: module.EntityLineageTab }) +const EntityLineageTab = withSuspenseFallback( + lazy(() => + import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ default: module.EntityLineageTab }) + ) ) ); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx index 3886be332476..d9cad5bdffe5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx @@ -12,7 +12,7 @@ */ import { get, uniqueId } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { @@ -20,6 +20,7 @@ import type { ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; +import Loader from '../components/common/Loader/Loader'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -185,12 +186,14 @@ export const getSearchIndexDetailsTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx index 85e3ad6659b5..40723d31c8e0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/StoredProceduresUtils.tsx @@ -11,13 +11,14 @@ * limitations under the License. */ import { get } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../components/common/Loader/Loader'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -125,12 +126,14 @@ export const getStoredProcedureDetailsPageTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx index 6735564079a0..f97e52bdb5e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableTabsUtils.tsx @@ -13,13 +13,14 @@ import { Divider, Space, Typography } from 'antd'; import { get, isUndefined } from 'lodash'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; +import Loader from '../components/common/Loader/Loader'; import type { TabProps } from '../components/common/TabsLabel/TabsLabel.interface'; import type { SourceType } from '../components/SearchedData/SearchedData.interface'; import { NO_DATA_PLACEHOLDER } from '../constants/constants'; @@ -108,9 +109,11 @@ const DataObservabilityTab = withSuspenseFallback( ) ); -const EntityLineageTab = lazy(() => - import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( - (module) => ({ default: module.EntityLineageTab }) +const EntityLineageTab = withSuspenseFallback( + lazy(() => + import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( + (module) => ({ default: module.EntityLineageTab }) + ) ) ); @@ -121,8 +124,8 @@ const TableConstraints = withSuspenseFallback( ) ); -const KnowledgeGraph = lazy( - () => import('../components/KnowledgeGraph3D/KnowledgeGraph3D') +const KnowledgeGraph = withSuspenseFallback( + lazy(() => import('../components/KnowledgeGraph3D/KnowledgeGraph3D')) ); const QueryViewer = withSuspenseFallback( @@ -290,12 +293,14 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - + }> + + ), }, { @@ -312,18 +317,20 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.KNOWLEDGE_GRAPH, children: ( - + }> + + ), isHidden: !useApplicationStore.getState().rdfEnabled, }, From 8bb95bec0f19753a5666135c306012d455a7e4f6 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Tue, 7 Jul 2026 03:32:58 +0530 Subject: [PATCH 15/17] fix failing tests --- .../e2e/Features/GlobalPageSize.spec.ts | 14 ++++++++++++-- .../DomainDataProductsWidgets.spec.ts | 18 +++++++++--------- .../ui/playwright/utils/permission.ts | 9 ++++++--- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/GlobalPageSize.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/GlobalPageSize.spec.ts index 729ef8fcc48c..82d9af82cbe1 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/GlobalPageSize.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/GlobalPageSize.spec.ts @@ -28,8 +28,18 @@ test.describe('Table & Data Model columns table pagination', () => { await waitForAllLoadersToDisappear(page); // Change page size to 25 - await page.getByTestId('page-size-selection-dropdown').click(); - await page.getByRole('menuitem', { name: '25 / Page' }).click(); + const tablePageSizeDropdown = page.getByTestId( + 'page-size-selection-dropdown' + ); + await tablePageSizeDropdown.scrollIntoViewIfNeeded(); + await expect(tablePageSizeDropdown).toBeVisible(); + await tablePageSizeDropdown.hover(); + + const tablePageSizeOption = page + .locator('.ant-dropdown:not(.ant-dropdown-hidden)') + .getByRole('menuitem', { name: '25 / Page' }); + await expect(tablePageSizeOption).toBeVisible(); + await tablePageSizeOption.click(); await waitForAllLoadersToDisappear(page); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts index 11ff74a37cd2..d1b99699e3c9 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts @@ -254,18 +254,18 @@ test.describe.serial('Domain and Data Product Asset Counts', () => { await waitForAllLoadersToDisappear(page); await sidebarClick(page, SidebarItem.DATA_PRODUCT); await selectDataProduct(page, dataProduct.data); + await waitForAllLoadersToDisappear(page); + const dataProductAssetsResponse = page.waitForResponse( + (response) => + response.url().includes('/api/v1/dataProducts/name/') && + response.url().includes('fields=domains%2Cassets') && + response.request().method() === 'GET' + ); await page.getByTestId('assets').click(); + await dataProductAssetsResponse; - await page - .getByTestId('loader') - .waitFor({ - state: 'detached', - timeout: 10000, - }) - .catch(() => { - /* ignore if loader not found */ - }); + let hasAssets = true; while (hasAssets) { diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/permission.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/permission.ts index 6ed253c35e75..097fc1b21ecf 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/permission.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/permission.ts @@ -137,9 +137,12 @@ export const validateViewPermissions = async ( await expect(page.locator('[data-testid="add-domain"]')).not.toBeVisible(); if (permission?.editDisplayName) { - expect( - await page.locator('[data-testid="edit-displayName-button"]').count() - ).toBeGreaterThan(0); + const editDisplayNameButton = page.locator( + '[data-testid="edit-displayName-button"]' + ); + await expect(editDisplayNameButton.first()).toBeVisible({ + timeout: 30_000, + }); } else { await expect( page.locator('[data-testid="edit-displayName-button"]') From 7485779d4bed94118cfd73c64f1e22c23c79b7c8 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Tue, 7 Jul 2026 03:44:03 +0530 Subject: [PATCH 16/17] address comments and fix checkstyle --- .../DomainDataProductsWidgets.spec.ts | 2 -- .../AuthProviders/LazyAuthProviderWrappers.tsx | 14 +++++--------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts index d1b99699e3c9..715f95a15b8a 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts @@ -265,8 +265,6 @@ test.describe.serial('Domain and Data Product Asset Counts', () => { await page.getByTestId('assets').click(); await dataProductAssetsResponse; - - let hasAssets = true; while (hasAssets) { const checkboxes = page.locator( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx index 0c9d44d70548..0249e9fb27df 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AuthProviders/LazyAuthProviderWrappers.tsx @@ -14,31 +14,27 @@ import type { CacheLocation } from '@auth0/auth0-react'; import type { IPublicClientApplication } from '@azure/msal-browser'; import { lazy, ReactNode } from 'react'; -import { - withPageSuspenseFallback, - withSuspenseFallback, -} from '../../AppRouter/withSuspenseFallback'; +import { withPageSuspenseFallback } from '../../AppRouter/withSuspenseFallback'; -const Auth0ProviderComponent = withSuspenseFallback( +const Auth0ProviderComponent = withPageSuspenseFallback( lazy(() => import('@auth0/auth0-react').then((m) => ({ default: m.Auth0Provider })) ) ); -const MsalProviderComponent = withSuspenseFallback( +const MsalProviderComponent = withPageSuspenseFallback( lazy(() => import('@azure/msal-react').then((m) => ({ default: m.MsalProvider })) ) ); -const OktaAuthProviderComponent = withSuspenseFallback( +const OktaAuthProviderComponent = withPageSuspenseFallback( lazy(() => import('./OktaAuthProvider').then((m) => ({ default: m.OktaAuthProvider })) ) ); -// withPageSuspenseFallback blocks form interaction while the provider loads, -// preventing stub-context errors if the user submits before BasicAuthProvider mounts. +// Auth providers wrap the app shell, so their cold chunks need a visible page fallback. const BasicAuthProviderComponent = withPageSuspenseFallback( lazy(() => import('./BasicAuthProvider')) ); From e167d12571e1ede6c13d012f9f6d381234148857 Mon Sep 17 00:00:00 2001 From: Harshit Shah Date: Tue, 7 Jul 2026 20:22:45 +0530 Subject: [PATCH 17/17] fix(ui): add tab content suspense fallbacks --- .../AppRouter/withSuspenseFallback.tsx | 2 + .../CommonWidgets/CommonWidgets.tsx | 40 +++++++++---- .../Execution/Execution.component.tsx | 2 +- .../Topic/TopicSchema/TopicSchema.tsx | 7 ++- .../SearchIndexFieldsTab.tsx | 7 ++- .../StoredProcedure/StoredProcedureTab.tsx | 2 +- .../ui/src/utils/DataProductUtils.tsx | 7 ++- .../ui/src/utils/DatabaseSchemaTabsUtils.tsx | 7 ++- .../ui/src/utils/DirectoryDetailsUtils.tsx | 7 ++- .../ui/src/utils/FileDetailsUtils.tsx | 7 ++- .../ui/src/utils/LazyTagComponents.tsx | 3 +- .../ui/src/utils/PipelineDetailsUtils.tsx | 7 ++- .../ui/src/utils/SearchIndexUtils.tsx | 13 ++-- .../resources/ui/src/utils/TableTabsUtils.tsx | 59 ++++++++++++------- .../ui/src/utils/TopicDetailsUtils.tsx | 7 ++- .../ui/src/utils/WorksheetDetailsUtils.tsx | 7 ++- 16 files changed, 125 insertions(+), 59 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx index eddf4573f410..4f021b5ac50b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx @@ -14,6 +14,8 @@ import { ComponentType, forwardRef, ReactNode, Suspense } from 'react'; import Loader from '../common/Loader/Loader'; +export const TAB_CONTENT_FALLBACK = ; + export function withSuspenseFallback( Component: ComponentType, // Keep embedded/background lazy chunks silent unless a caller opts into visible progress. diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx index 3fbc27214a38..9d075dfc228d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx @@ -51,7 +51,9 @@ import { import { getPrioritizedViewPermission } from '../../../utils/PermissionsUtils'; import { getTagsWithoutTier, getTierTags } from '../../../utils/TablePureUtils'; import { createTagObject } from '../../../utils/TagsPureUtils'; -import withSuspenseFallback from '../../AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../../AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, @@ -64,7 +66,8 @@ type CustomPropertyTableComponent = ( ) => JSX.Element; const CertificationWidget = withSuspenseFallback( - lazy(() => import('../../common/CertificationWidget/CertificationWidget')) + lazy(() => import('../../common/CertificationWidget/CertificationWidget')), + TAB_CONTENT_FALLBACK ); const CustomPropertyTable = withSuspenseFallback( @@ -74,15 +77,18 @@ const CustomPropertyTable = withSuspenseFallback( default: m.CustomPropertyTable, }) ) - ) + ), + TAB_CONTENT_FALLBACK ) as CustomPropertyTableComponent; const DescriptionV1 = withSuspenseFallback( - lazy(() => import('../../common/EntityDescription/DescriptionV1')) + lazy(() => import('../../common/EntityDescription/DescriptionV1')), + TAB_CONTENT_FALLBACK ); const TierWidget = withSuspenseFallback( - lazy(() => import('../../common/TierWidget/TierWidget')) + lazy(() => import('../../common/TierWidget/TierWidget')), + TAB_CONTENT_FALLBACK ); const LeftPanelContainer = withSuspenseFallback( @@ -90,7 +96,8 @@ const LeftPanelContainer = withSuspenseFallback( import('../../Customization/GenericTab/LeftPanelContainer').then((m) => ({ default: m.LeftPanelContainer, })) - ) + ), + TAB_CONTENT_FALLBACK ); const DataProductsContainer = withSuspenseFallback( @@ -99,7 +106,8 @@ const DataProductsContainer = withSuspenseFallback( import( '../../DataProducts/DataProductsContainer/DataProductsContainer.component' ) - ) + ), + TAB_CONTENT_FALLBACK ); const DomainExpertWidget = withSuspenseFallback( @@ -107,11 +115,13 @@ const DomainExpertWidget = withSuspenseFallback( import('../../Domain/DomainExpertsWidget/DomainExpertWidget').then((m) => ({ default: m.DomainExpertWidget, })) - ) + ), + TAB_CONTENT_FALLBACK ); const TagsContainerV2 = withSuspenseFallback( - lazy(() => import('../../Tag/TagsContainerV2/TagsContainerV2')) + lazy(() => import('../../Tag/TagsContainerV2/TagsContainerV2')), + TAB_CONTENT_FALLBACK ); const DomainLabelV2 = withSuspenseFallback( @@ -119,7 +129,8 @@ const DomainLabelV2 = withSuspenseFallback( import('../DomainLabelV2/DomainLabelV2').then((m) => ({ default: m.DomainLabelV2, })) - ) + ), + TAB_CONTENT_FALLBACK ); const OwnerLabelV2 = withSuspenseFallback( @@ -127,7 +138,8 @@ const OwnerLabelV2 = withSuspenseFallback( import('../OwnerLabelV2/OwnerLabelV2').then((m) => ({ default: m.OwnerLabelV2, })) - ) + ), + TAB_CONTENT_FALLBACK ); const ReviewerLabelV2 = withSuspenseFallback( @@ -135,7 +147,8 @@ const ReviewerLabelV2 = withSuspenseFallback( import('../ReviewerLabelV2/ReviewerLabelV2').then((m) => ({ default: m.ReviewerLabelV2, })) - ) + ), + TAB_CONTENT_FALLBACK ); const GlossaryUpdateConfirmationModal = withSuspenseFallback( @@ -143,7 +156,8 @@ const GlossaryUpdateConfirmationModal = withSuspenseFallback( import( '../../Glossary/GlossaryUpdateConfirmationModal/GlossaryUpdateConfirmationModal' ).then((m) => ({ default: m.GlossaryUpdateConfirmationModal })) - ) + ), + TAB_CONTENT_FALLBACK ); interface GenericEntity diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx index 7177da707110..c563ee07bee5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx @@ -57,7 +57,7 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => { const [endTime, setEndTime] = useState(getCurrentMillis()); const [isClickedCalendar, setIsClickedCalendar] = useState(false); const [status, setStatus] = useState(MenuOptions.all); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const fetchPipelineStatus = async (startRange: number, endRange: number) => { try { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx index 7407a38f1a53..e29569ba9982 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx @@ -59,7 +59,9 @@ import { } from '../../../utils/TablePureUtils'; import { getAllTags } from '../../../utils/TableTags/TableTags.utils'; import { getTableExpandableConfig } from '../../../utils/TableUtils'; -import withSuspenseFallback from '../../AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../../AppRouter/withSuspenseFallback'; import CopyLinkButton from '../../common/CopyLinkButton/CopyLinkButton'; import { EntityAttachmentProvider } from '../../common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider'; import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder'; @@ -76,7 +78,8 @@ import { } from './TopicSchema.interface'; const SchemaEditor = withSuspenseFallback( - lazy(() => import('../../Database/SchemaEditor/SchemaEditor')) + lazy(() => import('../../Database/SchemaEditor/SchemaEditor')), + TAB_CONTENT_FALLBACK ); const ModalWithMarkdownEditor = withSuspenseFallback( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTab/SearchIndexFieldsTab.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTab/SearchIndexFieldsTab.tsx index 25a2c2016439..1c8f0bc43a72 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTab/SearchIndexFieldsTab.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTab/SearchIndexFieldsTab.tsx @@ -12,7 +12,9 @@ */ import { lazy, useCallback, useMemo } from 'react'; -import withSuspenseFallback from '../../../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../../../components/AppRouter/withSuspenseFallback'; import { useGenericContext } from '../../../components/Customization/GenericProvider/GenericContext'; import { SearchIndex, @@ -22,7 +24,8 @@ import { useFqn } from '../../../hooks/useFqn'; import { getAllRowKeysByKeyName } from '../../../utils/TablePureUtils'; const SearchIndexFieldsTable = withSuspenseFallback( - lazy(() => import('../SearchIndexFieldsTable/SearchIndexFieldsTable')) + lazy(() => import('../SearchIndexFieldsTable/SearchIndexFieldsTable')), + TAB_CONTENT_FALLBACK ); function SearchIndexFieldsTab() { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx index f1c21d59c1b4..f12f8e3cf46e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx @@ -57,7 +57,7 @@ const StoredProcedureTab = () => { } = usePaging(); const [storedProcedure, setStoredProcedure] = useState([]); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const { fqn: decodedDatabaseSchemaFQN } = useFqn(); useEffect(() => { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataProductUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataProductUtils.tsx index ed24b4e746c4..5a1597a023a6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DataProductUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataProductUtils.tsx @@ -19,7 +19,9 @@ import { ReactComponent as DefaultDataProductIcon, } from '../assets/svg/ic-data-product.svg'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, @@ -106,7 +108,8 @@ const InputOutputPortsTab = withSuspenseFallback( import('../components/DataProducts/InputOutputPortsTab').then((module) => ({ default: module.InputOutputPortsTab, })) - ) + ), + TAB_CONTENT_FALLBACK ); const ResizablePanels = withSuspenseFallback( diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaTabsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaTabsUtils.tsx index 08a95ce9ce67..98b0cc751632 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaTabsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaTabsUtils.tsx @@ -13,7 +13,9 @@ import { get } from 'lodash'; import { lazy } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, @@ -60,7 +62,8 @@ const SchemaTablesTab = withSuspenseFallback( ); const StoredProcedureTab = withSuspenseFallback( - lazy(() => import('../pages/StoredProcedure/StoredProcedureTab')) + lazy(() => import('../pages/StoredProcedure/StoredProcedureTab')), + TAB_CONTENT_FALLBACK ); export const getDataBaseSchemaPageBaseTabs = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DirectoryDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DirectoryDetailsUtils.tsx index 80196b165f8e..590cad07504d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DirectoryDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DirectoryDetailsUtils.tsx @@ -13,7 +13,9 @@ import { get } from 'lodash'; import { lazy } from 'react'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -37,7 +39,8 @@ const DirectoryChildrenTable = withSuspenseFallback( import( '../components/DriveService/Directory/DirectoryChildrenTable/DirectoryChildrenTable' ) - ) + ), + TAB_CONTENT_FALLBACK ); export interface DirectoryDetailPageTabProps { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/FileDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/FileDetailsUtils.tsx index 91f2d7d270f5..2cd4a4e15a41 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/FileDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/FileDetailsUtils.tsx @@ -13,7 +13,9 @@ import { get, isEmpty } from 'lodash'; import { lazy } from 'react'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -37,7 +39,8 @@ const FileColumnsTable = withSuspenseFallback( import( '../components/DriveService/File/FileColumnsTable/FileColumnsTable' ) - ) + ), + TAB_CONTENT_FALLBACK ); export interface FileDetailPageTabProps { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/LazyTagComponents.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/LazyTagComponents.tsx index 08bc13c24728..968e3aadad69 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/LazyTagComponents.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/LazyTagComponents.tsx @@ -12,6 +12,7 @@ */ import { lazy, Suspense } from 'react'; +import { TAB_CONTENT_FALLBACK } from '../components/AppRouter/withSuspenseFallback'; import { DomainLabelProps } from '../components/common/DomainLabel/DomainLabel.interface'; import { OwnerLabelV2Props } from '../components/DataAssets/OwnerLabelV2/OwnerLabelV2'; import { EntityType } from '../enums/entity.enum'; @@ -42,7 +43,7 @@ interface LazyCommonWidgetsProps { } export const LazyCommonWidgets = (props: LazyCommonWidgetsProps) => ( - + ); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx index 12e4ad76d392..17622137cc55 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/PipelineDetailsUtils.tsx @@ -17,7 +17,9 @@ import { ReactComponent as IconFailBadge } from '../assets/svg/fail-badge.svg'; import { ReactComponent as IconSkippedBadge } from '../assets/svg/skipped-badge.svg'; import { ReactComponent as IconSuccessBadge } from '../assets/svg/success-badge.svg'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, @@ -75,7 +77,8 @@ const EntityLineageTab = withSuspenseFallback( ); const ExecutionsTab = withSuspenseFallback( - lazy(() => import('../components/Pipeline/Execution/Execution.component')) + lazy(() => import('../components/Pipeline/Execution/Execution.component')), + TAB_CONTENT_FALLBACK ); const PipelineTaskTab = withSuspenseFallback( diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx index d9cad5bdffe5..53ad109a3cb1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx @@ -14,13 +14,14 @@ import { get, uniqueId } from 'lodash'; import { lazy, Suspense } from 'react'; import { ActivityFeedLayoutType } from '../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import type { CustomPropertyProps, ExtentionEntitiesKeys, } from '../components/common/CustomPropertyTable/CustomPropertyTable.interface'; import ErrorPlaceHolder from '../components/common/ErrorWithPlaceholder/ErrorPlaceHolder'; -import Loader from '../components/common/Loader/Loader'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -63,7 +64,8 @@ const ContractTab = withSuspenseFallback( ) ); const QueryViewer = withSuspenseFallback( - lazy(() => import('../components/common/QueryViewer/QueryViewer.component')) + lazy(() => import('../components/common/QueryViewer/QueryViewer.component')), + TAB_CONTENT_FALLBACK ); const SampleDataWithMessages = withSuspenseFallback( lazy( @@ -79,7 +81,8 @@ const SearchIndexFieldsTab = withSuspenseFallback( import( '../pages/SearchIndexDetailsPage/SearchIndexFieldsTab/SearchIndexFieldsTab' ) - ) + ), + TAB_CONTENT_FALLBACK ); const EntityLineageTab = lazy(() => import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( @@ -186,7 +189,7 @@ export const getSearchIndexDetailsTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + ({ default: module.ActivityFeedTab })) - ) + ), + TAB_CONTENT_FALLBACK ); const ErrorPlaceHolder = withSuspenseFallback( lazy( () => import('../components/common/ErrorWithPlaceholder/ErrorPlaceHolder') - ) + ), + TAB_CONTENT_FALLBACK ); const GenericTab = withSuspenseFallback( @@ -56,7 +59,8 @@ const GenericTab = withSuspenseFallback( import('../components/Customization/GenericTab/GenericTab').then( (module) => ({ default: module.GenericTab }) ) - ) + ), + TAB_CONTENT_FALLBACK ); const CommonWidgets = withSuspenseFallback( @@ -64,7 +68,8 @@ const CommonWidgets = withSuspenseFallback( import('../components/DataAssets/CommonWidgets/CommonWidgets').then( (module) => ({ default: module.CommonWidgets }) ) - ) + ), + TAB_CONTENT_FALLBACK ); const CustomPropertyTable = withSuspenseFallback( @@ -72,24 +77,30 @@ const CustomPropertyTable = withSuspenseFallback( import('../components/common/CustomPropertyTable/CustomPropertyTable').then( (module) => ({ default: module.CustomPropertyTable }) ) - ) + ), + TAB_CONTENT_FALLBACK ) as ( props: CustomPropertyProps ) => JSX.Element; const SchemaTable = withSuspenseFallback( - lazy(() => import('../components/Database/SchemaTable/SchemaTable.component')) + lazy( + () => import('../components/Database/SchemaTable/SchemaTable.component') + ), + TAB_CONTENT_FALLBACK ); const SampleDataTableComponent = withSuspenseFallback( lazy( () => import('../components/Database/SampleDataTable/SampleDataTable.component') - ) + ), + TAB_CONTENT_FALLBACK ); const TableQueries = withSuspenseFallback( - lazy(() => import('../components/Database/TableQueries/TableQueries')) + lazy(() => import('../components/Database/TableQueries/TableQueries')), + TAB_CONTENT_FALLBACK ); const ContractTab = withSuspenseFallback( @@ -97,7 +108,8 @@ const ContractTab = withSuspenseFallback( import('../components/DataContract/ContractTab/ContractTab').then( (module) => ({ default: module.ContractTab }) ) - ) + ), + TAB_CONTENT_FALLBACK ); const DataObservabilityTab = withSuspenseFallback( @@ -106,7 +118,8 @@ const DataObservabilityTab = withSuspenseFallback( import( '../components/Database/Profiler/DataObservability/DataObservabilityTab' ) - ) + ), + TAB_CONTENT_FALLBACK ); const EntityLineageTab = withSuspenseFallback( @@ -114,22 +127,26 @@ const EntityLineageTab = withSuspenseFallback( import('../components/Lineage/EntityLineageTab/EntityLineageTab').then( (module) => ({ default: module.EntityLineageTab }) ) - ) + ), + TAB_CONTENT_FALLBACK ); const TableConstraints = withSuspenseFallback( lazy( () => import('../pages/TableDetailsPageV1/TableConstraints/TableConstraints') - ) + ), + TAB_CONTENT_FALLBACK ); const KnowledgeGraph = withSuspenseFallback( - lazy(() => import('../components/KnowledgeGraph3D/KnowledgeGraph3D')) + lazy(() => import('../components/KnowledgeGraph3D/KnowledgeGraph3D')), + TAB_CONTENT_FALLBACK ); const QueryViewer = withSuspenseFallback( - lazy(() => import('../components/common/QueryViewer/QueryViewer.component')) + lazy(() => import('../components/common/QueryViewer/QueryViewer.component')), + TAB_CONTENT_FALLBACK ); const FrequentlyJoinedTables = withSuspenseFallback( @@ -137,7 +154,8 @@ const FrequentlyJoinedTables = withSuspenseFallback( import( '../pages/TableDetailsPageV1/FrequentlyJoinedTables/FrequentlyJoinedTables.component' ).then((module) => ({ default: module.FrequentlyJoinedTables })) - ) + ), + TAB_CONTENT_FALLBACK ); const PartitionedKeys = withSuspenseFallback( @@ -145,7 +163,8 @@ const PartitionedKeys = withSuspenseFallback( import( '../pages/TableDetailsPageV1/PartitionedKeys/PartitionedKeys.component' ).then((module) => ({ default: module.PartitionedKeys })) - ) + ), + TAB_CONTENT_FALLBACK ); export const getTableDetailPageBaseTabs = ({ @@ -293,7 +312,7 @@ export const getTableDetailPageBaseTabs = ({ ), key: EntityTabs.LINEAGE, children: ( - }> + }> + import('../components/Topic/TopicSchema/TopicSchema')) + lazy(() => import('../components/Topic/TopicSchema/TopicSchema')), + TAB_CONTENT_FALLBACK ); export const getTopicDetailsPageTabs = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/WorksheetDetailsUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/WorksheetDetailsUtils.tsx index 12f35efb7f37..fb3b121c65ef 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/WorksheetDetailsUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/WorksheetDetailsUtils.tsx @@ -13,7 +13,9 @@ import { get } from 'lodash'; import { lazy } from 'react'; -import withSuspenseFallback from '../components/AppRouter/withSuspenseFallback'; +import withSuspenseFallback, { + TAB_CONTENT_FALLBACK, +} from '../components/AppRouter/withSuspenseFallback'; import TabsLabel from '../components/common/TabsLabel/TabsLabel.component'; import { GenericTab } from '../components/Customization/GenericTab/GenericTab'; import { CommonWidgets } from '../components/DataAssets/CommonWidgets/CommonWidgets'; @@ -35,7 +37,8 @@ const WorksheetColumnsTable = withSuspenseFallback( import( '../components/DriveService/Worksheet/WorksheetColumnsTable/WorksheetColumnsTable' ) - ) + ), + TAB_CONTENT_FALLBACK ); export interface WorksheetDetailPageTabProps {