Updated the example index file to switch to dynamic imports

[Tulika-eGov]

Summary by CodeRabbit

• Refactor

  • Switched UI initialization to an asynchronous flow to improve reliability during startup and ensure components are fully ready before rendering.
  • No functional changes expected; overall behavior remains consistent for end-users.

• Style

  • Minor spacing cleanup in allowed user types configuration; no impact on functionality.

[coderabbitai]

📝 Walkthrough

Walkthrough

Converted UI initialization to asynchronous: initDigitUI is now async and awaits multiple module initializers during startup. Synchronous initializations were replaced with awaited calls. Minor formatting tweak applied to an allowedUserTypes array.

Changes

Cohort / File(s)	Summary
Async init flow update micro-ui/web/micro-ui-internals/example/src/index.js	Made initDigitUI async and replaced synchronous component initializations with awaited module-specific initializers (e.g., initCoreComponents, initDSSComponents). Minor whitespace formatting in allowedUserTypes array.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant App as App Entry
    participant Init as initDigitUI (async)
    participant Core as Core Components
    participant DSS as DSS Components
    participant Other as Other Modules

    User->>App: Load app
    App->>Init: Call initDigitUI()
    activate Init
    note right of Init: Async initialization sequence

    Init->>Core: await initCoreComponents()
    Core-->>Init: resolved

    Init->>DSS: await initDSSComponents()
    DSS-->>Init: resolved

    Init->>Other: await init...()
    Other-->>Init: resolved

    Init-->>App: Promise resolved
    App-->>User: UI ready

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I twitched my ears at async dawn,
Await, await—the modules yawn;
One by one, they spring to life,
Promises trimmed with little strife.
I thump my paw—init is through,
The UI hops, fresh-born and new. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description is missing entirely and does not follow the required template sections for JIRA ID, Module, and Description.	Please fill out the description using the repository’s template by providing the JIRA ID, affected module, and a detailed description of the changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly identifies the primary change of updating the example index file to use dynamic imports, which matches the core change in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch STUDIO-CORE-CHANGES-1

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1fd322b and e5ba002.

📒 Files selected for processing (1)

• micro-ui/web/micro-ui-internals/example/src/index.js (3 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.js

⚙️ CodeRabbit configuration file

check

Files:

• micro-ui/web/micro-ui-internals/example/src/index.js

🧠 Learnings (1)

📚 Learning: 2024-06-10T19:25:42.992Z

Learnt from: siddhant-nawale-egov
PR: egovernments/DIGIT-Frontend#698
File: micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanPreview.js:1-1
Timestamp: 2024-06-10T19:25:42.992Z
Learning: The imports in `MicroplanPreview.js` are from different libraries: `egovernments/digit-ui-components` and `egovernments/digit-ui-react-components`.

Applied to files:

• micro-ui/web/micro-ui-internals/example/src/index.js

🧬 Code graph analysis (1)

micro-ui/web/micro-ui-internals/example/src/index.js (4)

micro-ui/web/sandbox/App.js (1)

• initDigitUI (32-45)

micro-ui/web/src/App.js (1)

• initDigitUI (36-54)

micro-ui/web/core/App.js (1)

• initDigitUI (25-35)

micro-ui/web/workbench/App.js (1)

• initDigitUI (24-32)

⏰ Context from checks skipped due to timeout of 10000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Analyze (javascript-typescript)

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Dynamic import is broken—awaiting a string causes a crash.

await "@egovernments/..." just yields the string literal, so destructuring DigitUI, initCoreComponents, etc. immediately throws (“Cannot destructure property ... of string”). Use await import(...) (or Promise.all with import) to actually load the modules.

-  const { DigitUI, initCoreComponents } = await "@egovernments/digit-ui-module-core";
-  const { initDSSComponents } = await "@egovernments/digit-ui-module-dss";
-  const { initEngagementComponents } = await "@egovernments/digit-ui-module-engagement";
-  const { initHRMSComponents } = await "@egovernments/digit-ui-module-hrms";
-  const { initUtilitiesComponents } = await "@egovernments/digit-ui-module-utilities";
-  const { initWorkbenchComponents } = await "@egovernments/digit-ui-module-workbench";
-  const { initPGRComponents } = await "@egovernments/digit-ui-module-pgr";
-  const { initOpenPaymentComponents } = await "@egovernments/digit-ui-module-open-payment";
-  const { initSandboxComponents } = await "@egovernments/digit-ui-module-sandbox";
+  const { DigitUI, initCoreComponents } = await import("@egovernments/digit-ui-module-core");
+  const { initDSSComponents } = await import("@egovernments/digit-ui-module-dss");
+  const { initEngagementComponents } = await import("@egovernments/digit-ui-module-engagement");
+  const { initHRMSComponents } = await import("@egovernments/digit-ui-module-hrms");
+  const { initUtilitiesComponents } = await import("@egovernments/digit-ui-module-utilities");
+  const { initWorkbenchComponents } = await import("@egovernments/digit-ui-module-workbench");
+  const { initPGRComponents } = await import("@egovernments/digit-ui-module-pgr");
+  const { initOpenPaymentComponents } = await import("@egovernments/digit-ui-module-open-payment");
+  const { initSandboxComponents } = await import("@egovernments/digit-ui-module-sandbox");

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const { DigitUI, initCoreComponents } = await "@egovernments/digit-ui-module-core";
	const { initDSSComponents } = await "@egovernments/digit-ui-module-dss";
	const { initEngagementComponents } = await "@egovernments/digit-ui-module-engagement";
	const { initHRMSComponents } = await "@egovernments/digit-ui-module-hrms";
	const { initUtilitiesComponents } = await "@egovernments/digit-ui-module-utilities";
	const { initWorkbenchComponents } = await "@egovernments/digit-ui-module-workbench";
	const { initPGRComponents } = await "@egovernments/digit-ui-module-pgr";
	const { initOpenPaymentComponents } = await "@egovernments/digit-ui-module-open-payment";
	const { initSandboxComponents } = await "@egovernments/digit-ui-module-sandbox";
	const { DigitUI, initCoreComponents } = await import("@egovernments/digit-ui-module-core");
	const { initDSSComponents } = await import("@egovernments/digit-ui-module-dss");
	const { initEngagementComponents } = await import("@egovernments/digit-ui-module-engagement");
	const { initHRMSComponents } = await import("@egovernments/digit-ui-module-hrms");
	const { initUtilitiesComponents } = await import("@egovernments/digit-ui-module-utilities");
	const { initWorkbenchComponents } = await import("@egovernments/digit-ui-module-workbench");
	const { initPGRComponents } = await import("@egovernments/digit-ui-module-pgr");
	const { initOpenPaymentComponents } = await import("@egovernments/digit-ui-module-open-payment");
	const { initSandboxComponents } = await import("@egovernments/digit-ui-module-sandbox");

🤖 Prompt for AI Agents

In micro-ui/web/micro-ui-internals/example/src/index.js around lines 56 to 64,
the code uses expressions like `await "@egovernments/..."` which only returns
the string and causes destructuring to fail; replace these with actual dynamic
imports (e.g., `await import("...")`) or use Promise.all with import() calls to
load the modules, then destructure the exported members from the resolved module
objects before using them.