Skip to content

OCPBUGS-79000: Fix perspective switcher icon suspending the whole app #16183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
logonoff wants to merge 2 commits into
base: main
Choose a base branch
from
+18 −10
Open

OCPBUGS-79000: Fix perspective switcher icon suspending the whole app #16183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
114d974
OCPBUGS-79000: Fix perspective switcher icon suspending the whole app
logonoff Mar 20, 2026
8177e0e
OCPBUGS-79000: Add suspense to AppContent
logonoff Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions frontend/packages/console-app/src/components/nav/NavHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import type { FC, MouseEvent, Ref } from 'react';
import { useMemo, lazy, useState, useCallback, Suspense } from 'react';
import { useMemo, useState, useCallback } from 'react';
import type { MenuToggleElement } from '@patternfly/react-core';
import { MenuToggle, Select, SelectList, SelectOption, Title } from '@patternfly/react-core';
import { CogsIcon } from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
import { t } from 'i18next';
import type { Perspective } from '@console/dynamic-plugin-sdk';
import { useActivePerspective } from '@console/dynamic-plugin-sdk';
import { AsyncComponent } from '@console/internal/components/utils/async';
import { usePerspectives } from '@console/shared/src/hooks/usePerspectives';

export type NavHeaderProps = {
Expand All @@ -19,8 +20,9 @@ type PerspectiveDropdownItemProps = {
onClick: (perspective: string) => void;
};

const IconLoadingComponent: FC = () => <>&emsp;</>;

const PerspectiveDropdownItem: FC<PerspectiveDropdownItemProps> = ({ perspective, onClick }) => {
const LazyIcon = useMemo(() => lazy(perspective.properties.icon), [perspective.properties.icon]);
return (
<SelectOption
key={perspective.properties.id}
Expand All @@ -29,9 +31,10 @@ const PerspectiveDropdownItem: FC<PerspectiveDropdownItemProps> = ({ perspective
onClick(perspective.properties.id);
}}
icon={
<Suspense fallback={<>&emsp;</>}>
<LazyIcon />
</Suspense>
<AsyncComponent
loader={() => perspective.properties.icon().then((m) => m.default)}
LoadingComponent={IconLoadingComponent}
/>
}
>
<Title headingLevel="h2" size="md" data-test-id="perspective-switcher-menu-option">
Expand Down Expand Up @@ -75,8 +78,6 @@ const NavHeader: FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
[activePerspective, perspectiveExtensions],
);

const LazyIcon = useMemo(() => icon && lazy(icon), [icon]);

return perspectiveDropdownItems.length > 1 ? (
<div
className="oc-nav-header"
Expand All @@ -94,7 +95,14 @@ const NavHeader: FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
isExpanded={isPerspectiveDropdownOpen}
ref={toggleRef}
onClick={() => togglePerspectiveOpen()}
icon={<LazyIcon />}
icon={
icon && (
<AsyncComponent
loader={() => icon().then((m) => m.default)}
LoadingComponent={IconLoadingComponent}
/>
)
}
>
{name && (
<Title headingLevel="h2" size="md">
Expand Down
4 changes: 2 additions & 2 deletions frontend/public/components/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ const App: FC<{
};

const content = (
<>
<Suspense fallback={<LoadingBox blame="App content suspense" />}>
<ConsoleNotifier location="BannerTop" />
<QuickStartDrawer>
<CloudShellDrawer>
Expand Down Expand Up @@ -308,7 +308,7 @@ const App: FC<{
</QuickStartDrawer>
<ConsoleNotifier location="BannerBottom" />
<FeatureFlagExtensionLoader />
</>
</Suspense>
);

return (
Expand Down