fix(ui): backport Suspense loader fallbacks to 1.13

[shah-harshit]

Describe your changes:

Related to open-metadata/openmetadata-collate#4230.

Fixes #31877.

This backports #29746 directly to 1.13.

The change makes embedded and background lazy chunks silent by default, while page and active-tab boundaries opt into one appropriate loader. This prevents stacked loaders from appearing during tab navigation without removing progress feedback for blocking loads.

Validation:

• 21 changed Jest suites passed (321 tests)
• Production UI build passed
• UI checkstyle, license header, i18n, and generated app-doc checks passed
• Staged diff and conflict-marker checks passed

Type of change:

• Bug fix

Checklist:

• I have read the CONTRIBUTING document.
• I have commented on the non-obvious fallback behavior.
• I have added tests that cover the exact loader fallback behavior.

Greptile Summary

The PR separates silent embedded/background Suspense boundaries from visible page and active-tab loading states, preventing stacked loaders while retaining progress feedback where content is blocked.

• Makes the shared Suspense wrapper silent by default and introduces explicit page and tab fallbacks.
• Updates route-level lazy components to use full-page loading feedback.
• Adds explicit active-tab fallbacks to the Topic Schema, Search Index, and Database Schema boundaries identified in earlier review.
• Adjusts affected tests and asynchronous Playwright waits.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains; the previously reported silent active-tab loading paths now explicitly use visible tab-content fallbacks.

Important Files Changed

Filename	Overview
openmetadata-ui/src/main/resources/ui/src/components/AppRouter/withSuspenseFallback.tsx	Introduces silent-by-default Suspense behavior plus explicit tab-content and full-page fallback APIs; the previously reported active-tab omissions are addressed at their call sites.
openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx	The cold-loaded schema editor now explicitly renders the tab-content loader.
openmetadata-ui/src/main/resources/ui/src/utils/SearchIndexUtils.tsx	Search Index active-tab lazy components, including sample data, now explicitly render tab-content loading feedback.
openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaTabsUtils.tsx	Database Schema tables and stored-procedure lazy tabs now explicitly render tab-content loading feedback.
openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx	Route-level lazy pages consistently migrate to the full-page Suspense fallback.

_{Reviews (10): Last reviewed commit: "test(ui): wait for glossary term descrip..." | Re-trigger Greptile}

Context used:

• Knowledge Base — OpenMetadata React UI

[github-actions]

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

• No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

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 skip-pr-checks label.

[github-actions]

❌ UI Checkstyle Failed

❌ ESLint + Prettier + Organise Imports (src)

One or more source files have linting or formatting issues.

❌ Core Components - I18n Sync

Core-components t() keys, locale files, or language-set are out of sync. Run yarn check-i18n-all locally.

❌ Tailwind Audit

Hardcoded Tailwind values found. Use a design-system utility (run yarn tw-audit:report for the token each value maps to).

❌ Antd + Less Deprecation Guard

A new antd import or new .less file was added. Use UntitledUI + Tailwind for new work.

Affected files

at Function._resolveFilename (node:internal/modules/cjs/loader:1401:15)
at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22)
at Function._load (node:internal/modules/cjs/loader:1211:37)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5)
at node:internal/main/run_main_module:36:49 {

---

Fix locally (fast - only checks files changed in this branch):

make ui-checkstyle-changed

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	63.48% (61144/96311)	44.8% (33560/74908)	46.71% (10232/21902)

[gitar-bot]

Code Review ✅ Approved 2 resolved / 2 findings

Backports Suspense loader fallbacks to branch 1.13 by making embedded lazy chunks silent and adding explicit tab-content loaders to prevent stacked indicators. No issues found.

✅ 2 resolved

✅ Edge Case: assignDomainWidget/removeDomainWidget check visibility without waiting

📄 openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts:253-256 📄 openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts:299-303 📄 openmetadata-ui/src/main/resources/ui/playwright/utils/domain.ts:66-79
In the newly added assignDomainWidget and removeDomainWidget, the code does const isAdd = await addBtn.isVisible() immediately, without first waiting for either button to render. isVisible() resolves instantly, so if the widget hasn't finished rendering yet it returns false and the helper clicks edit-domain, which may not exist, leading to a flaky timeout. The adjacent clickAvailableWidgetAction helper (added in the same diff) already handles this correctly by awaiting addBtn.or(editBtn).first().waitFor({ state: 'visible' }) before deciding. Reuse that helper (or add the same wait) in these two functions for consistency and stability.

✅ Quality: Unused mcpChatEnabled state added to ApplicationsProvider

📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx:38
The added const [mcpChatEnabled, setMcpChatEnabled] = useState(false); is never read and the setter is never called, so it is dead code unrelated to this Suspense-loader backport. The repo enforces no-unused-vars in CI checkstyle, so this will fail lint and block merge. Remove the line (or wire it up if it was intended to be used).

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud