feat(ui): lazy load home page widgets

[shah-harshit]

Summary

• Replace 11 static widget imports with React.lazy() dynamic imports in CustomizeMyDataPageClassBase.ts
• Wrap each widget render in <Suspense> with a WidgetWrapper skeleton fallback in CustomizableLandingPageUtils.tsx
• Named exports (MyFeedWidget, MyDataWidget) handled via .then(m => ({ default: m.X })) pattern
• getWidgetsFromKey return type updated from FC to ComponentType to accommodate lazy components

Effect: Each home page widget now loads as a separate JS chunk. Browser fetches widget bundles on demand rather than including all of them in the initial page bundle. Suspense fallback shows the existing skeleton UI during chunk load — no visual regression.

Closes https://github.com/open-metadata/openmetadata-collate/issues/4075

Test plan

• Unit tests pass: MyDataPage.test.tsx and CustomizableLandingPageUtils.test.tsx — 32/32 tests pass
• Navigate to home page — widgets load and render correctly
• Verify skeleton fallback appears briefly on slow connections (throttle network in DevTools)
• Verify persona-configured widget layouts still work
• Verify welcome screen flow still works for first-time login

🤖 Generated with Claude Code

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.53% (64737/103526)	43.25% (35263/81531)	46.01% (10377/22553)

[github-actions]

🔴 Playwright Results — 1 failure(s), 12 flaky

✅ 4057 passed · ❌ 1 failed · 🟡 12 flaky · ⏭️ 103 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	298	0	1	4
🔴 Shard 2	741	1	8	25
✅ Shard 3	784	0	0	7
🟡 Shard 4	789	0	1	18
🟡 Shard 5	708	0	1	41
🟡 Shard 6	737	0	1	8

Genuine Failures (failed on all attempts)

❌ Features/Glossary/GlossaryWorkflow.spec.ts › should display correct status badge color and icon (shard 2)

Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveText�[2m(�[22m�[32mexpected�[39m�[2m)�[22m failed

Locator:  locator('[data-row-key*="StatusBadgeTerm1778757165748"]').locator('.status-badge')
Expected: �[32m"Draft"�[39m
Received: �[31m"In Review"�[39m
Timeout:  15000ms

Call log:
�[2m  - Expect "toHaveText" with timeout 15000ms�[22m
�[2m  - waiting for locator('[data-row-key*="StatusBadgeTerm1778757165748"]').locator('.status-badge')�[22m
�[2m    18 × locator resolved to <div class="status-badge inReview" data-testid=""PW%'8a9e539a.Noble2159e5de".StatusBadgeTerm1778757165748-status">…</div>�[22m
�[2m       - unexpected value "In Review"�[22m

🟡 12 flaky test(s) (passed on retry)

• Pages/AuditLogs.spec.ts › should create audit log entry when glossary is updated (shard 1, 1 retry)
• Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
• Features/DomainFilterQueryFilter.spec.ts › Multi-nested domain hierarchy: filters should scope correctly at every level (shard 2, 1 retry)
• Features/ExploreQuickFilters.spec.ts › tier with assigned asset appears in dropdown, tier without asset does not (shard 2, 1 retry)
• Features/KnowledgeCenterList.spec.ts › Knowledge Center List - Test infinite scroll/pagination (shard 2, 2 retries)
• Features/KnowledgeCenterList.spec.ts › Knowledge Center List - Test add article button (shard 2, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 2, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 2, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 2, 1 retry)
• Pages/CustomProperties.spec.ts › Set & Update all CP types on apiCollection (shard 4, 1 retry)
• Pages/Entity.spec.ts › Inactive Announcement create & delete (shard 5, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[gitar-bot]

Code Review ✅ Approved 1 resolved / 1 findings

Implements lazy loading for home page widgets to improve initial load performance, but requires an error boundary to handle potential chunk load failures.

✅ 1 resolved

✅ Edge Case: Missing per-widget error boundary for chunk load failures

📄 openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx:427-437
If a lazy-loaded widget chunk fails to download (network timeout, deploy during navigation, ad-blocker), React will throw an error. Currently the only error boundary is the global one in AppRoot.tsx, which will unmount the entire page — not just the failing widget. Adding a per-widget error boundary around the <Suspense> would isolate failures so that one broken widget doesn't take down the whole landing page.

This is particularly relevant for the home/landing page which loads up to 11 independent widget chunks in parallel.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1363 New issues
0 Accepted issues

Measures
17 Security Hotspots
0.0% Coverage on New Code
4.1% Duplication on New Code

See analysis details on SonarQube Cloud