perf(ui): lazy load service and ingestion widgets#29182
Conversation
shah-harshit
added
UI
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Code Review ✅ Approved 2 resolved / 2 findingsImplements lazy-loading for service widgets and auth-related routes to improve LCP, while cleaning up dead ✅ 2 resolved✅ Edge Case: getUserByName profile cache keyed only by name, ignores params
✅ Bug: Imports reference modules/symbols that don't exist in this branch
OptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
Jest test CoverageUI tests summary
|
|
1 participant
Summary
Testing
Ref: https://github.com/open-metadata/openmetadata-collate/issues/4230
Summary by Gitar
userAPI.tsto reduce redundant API calls across widgets.clearUserProfileCacheandclearDashboardWidgetCacheto the authentication logout flow.PageNotFound,LogoutPage, and other core routes inAuthenticatedRoutes.tsx.oidc-clientloading inAuthProvider.util.tsto improve initial load time.withSuspenseFallbackfor critical UI components to handle lazy-loading states gracefully.ServiceUtilClassBasefrom eager imports by centralizing widget access viaServiceInsightsWidgets.tsx.This will update automatically on new commits.
Greptile Summary
This PR decouples eager service/ingestion widget imports from shared module paths to reduce the initial bundle size, and defers
oidc-clientloading to the SSO test-login flow only. It is part of a larger dashboard LCP optimization effort.AgentsStatusWidget,PlatformInsightsWidget,TotalDataAssetsWidget, andMetadataAgentsWidgetsub-components (IngestionListTable,AddIngestionButton) are now wrapped withwithSuspenseFallback(lazy(...))and exported viaServiceInsightsWidgets.tsx, removing them from the eager import chain inServiceUtilClassBase.getCandidateUserManagerConfigis madeasyncand dynamically importsWebStorageStateStoreon demand; both call-sites (ssoTestCallbackBootstrap.ts,useSsoTestLogin.ts) are correctly updated withawait.ServiceUtilClassBase.getAgentsTabWidgets()now returns{}, reflecting that the defaultMetadataAgentsWidgetis provided viagetDefaultAgentsTabWidgets()consumed directly byIngestion.component.tsx, keeping the base class free of heavy widget imports.Confidence Score: 5/5
Safe to merge — all widget imports are correctly deferred, the async OIDC change is properly awaited at every call-site, and base-class API changes are consistent with how callers already consume the defaults.
The PR performs purely structural refactoring: moving eager imports to dynamic chunks and converting runtime imports to type-only imports where the value is never instantiated. The async signature change to getCandidateUserManagerConfig is propagated to both callers. ServiceUtilClassBase.getAgentsTabWidgets() returning {} is intentional because Ingestion.component.tsx already calls getDefaultAgentsTabWidgets() directly for the default widget. No logic paths are altered in a way that could produce incorrect behavior.
No files require special attention. The most structurally significant change is ServiceUtilClassBase.ts — its getAgentsTabWidgets() now returns an empty object — but this is intentional and consistent with how Ingestion.component.tsx sources its default widget.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[App Bootstrap] --> B[AuthProvider] A --> C[AuthenticatedRoutes] B --> D{OIDC flow?} D -- SSO Test Login only --> E["dynamic import oidc-client\ngetCandidateUserManagerConfig async"] D -- Normal login --> F[OidcTokenStorage lightweight] C --> G[withSuspenseFallback + lazy] G --> H[PageNotFound chunk] G --> I[LogoutPage chunk] G --> J[AccessNotAllowedPage chunk] M[ServiceUtilClassBase] --> N[getInsightsTabWidgets] N --> O[getDefaultInsightsTabWidgets] O --> P[withSuspenseFallback + lazy] P --> Q[AgentsStatusWidget chunk] P --> R[PlatformInsightsWidget chunk] P --> S[TotalDataAssetsWidget chunk] T[Ingestion.component] --> U[getDefaultAgentsTabWidgets] T --> V["getAgentsTabWidgets returns empty\nextension point for subclasses"] U --> W[MetadataAgentsWidget chunk] W --> X[withSuspenseFallback + lazy] X --> Y[IngestionListTable chunk] X --> Z[AddIngestionButton chunk]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A[App Bootstrap] --> B[AuthProvider] A --> C[AuthenticatedRoutes] B --> D{OIDC flow?} D -- SSO Test Login only --> E["dynamic import oidc-client\ngetCandidateUserManagerConfig async"] D -- Normal login --> F[OidcTokenStorage lightweight] C --> G[withSuspenseFallback + lazy] G --> H[PageNotFound chunk] G --> I[LogoutPage chunk] G --> J[AccessNotAllowedPage chunk] M[ServiceUtilClassBase] --> N[getInsightsTabWidgets] N --> O[getDefaultInsightsTabWidgets] O --> P[withSuspenseFallback + lazy] P --> Q[AgentsStatusWidget chunk] P --> R[PlatformInsightsWidget chunk] P --> S[TotalDataAssetsWidget chunk] T[Ingestion.component] --> U[getDefaultAgentsTabWidgets] T --> V["getAgentsTabWidgets returns empty\nextension point for subclasses"] U --> W[MetadataAgentsWidget chunk] W --> X[withSuspenseFallback + lazy] X --> Y[IngestionListTable chunk] X --> Z[AddIngestionButton chunk]Reviews (3): Last reviewed commit: "fix(ui): resolve services ingestion lazy..." | Re-trigger Greptile