Fixed blinking issue while lazy loading plugin components #10702
Conversation
WalkthroughThis pull request updates the asynchronous loading behavior across plugin and encounter tab components by incorporating React’s Suspense. The PluginEngine now wraps its plugin components with a Suspense that displays a fallback UI during loading, and the ESLint directive regarding literal strings has been removed. In the care apps hook, a new higher-order component Changes
Sequence Diagram(s)sequenceDiagram
participant P as PluginEngine
participant S as React.Suspense
participant L as Loader
P->>S: Wrap plugin component (fallback: Loading...)
S->>L: Initiate async loading
alt Component not loaded
S-->>P: Render fallback UI
else Component loaded
L-->>S: Return loaded plugin component
S-->>P: Render plugin component
end
sequenceDiagram
participant U as Encounter Component
participant H as withSuspense HOC
participant S as React.Suspense
participant T as Encounter Tab
U->>H: Request Encounter Tab
H->>S: Wrap Encounter Tab (fallback: Loading)
S->>T: Initiate async loading
alt Tab not loaded
S-->>H: Render fallback UI
else Tab loaded
T-->>S: Return loaded Encounter Tab
S-->>H: Render Encounter Tab
end
H-->>U: Return wrapped Encounter Tab
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying care-fe with
|
| Latest commit: |
d32c66f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://67c2ea0b.care-fe.pages.dev |
| Branch Preview URL: | https://khavinshankar-fix-fix-plugga.care-fe.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/PluginEngine.tsx (1)
54-58: LGTM! The Suspense wrapper effectively addresses the blinking issue.The implementation correctly wraps plugin components with Suspense, providing a smooth loading experience during lazy loading.
However, consider using the shared Loading component for consistency with other loading states in the application.
- <React.Suspense key={plugin.plugin} fallback={<div>Loading...</div>}> + <React.Suspense key={plugin.plugin} fallback={<Loading />}>src/hooks/useCareApps.tsx (1)
37-49: Consider optimizing the reduce operations.While the current implementation works well for a small number of tabs, the use of spread operators in reducers can lead to O(n²) complexity.
Consider using Object.assign or maintaining an array instead:
return careApps.reduce((acc, app) => { - const appTabs = Object.entries(app.encounterTabs ?? {}).reduce( - (acc, [key, Component]) => { - return { ...acc, [key]: withSuspense(Component) }; - }, - {}, - ); - - return { ...acc, ...appTabs }; + return Object.assign(acc, + Object.fromEntries( + Object.entries(app.encounterTabs ?? {}) + .map(([key, Component]) => [key, withSuspense(Component)]) + ) + ); }, {});🧰 Tools
🪛 Biome (1.9.4)
[error] 43-43: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
[error] 48-48: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/PluginEngine.tsx(1 hunks)src/hooks/useCareApps.tsx(2 hunks)src/pages/Encounters/EncounterShow.tsx(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/hooks/useCareApps.tsx
[error] 43-43: Avoid the use of spread (...) syntax on accumulators.
Spread syntax should be avoided on accumulators (like those in .reduce) because it causes a time complexity of O(n^2).
Consider methods such as .splice or .push instead.
(lint/performance/noAccumulatingSpread)
[error] 48-48: Avoid the use of spread (...) syntax on accumulators.
Spread syntax should be avoided on accumulators (like those in .reduce) because it causes a time complexity of O(n^2).
Consider methods such as .splice or .push instead.
(lint/performance/noAccumulatingSpread)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (2)
src/hooks/useCareApps.tsx (1)
26-35: LGTM! The withSuspense HOC is well-implemented.The implementation correctly wraps components with Suspense and maintains proper TypeScript typing.
src/pages/Encounters/EncounterShow.tsx (1)
11-11: LGTM! The switch to encounter tabs is appropriate.The change from consultation tabs to encounter tabs aligns better with the component's purpose and maintains proper functionality with the new Suspense-wrapped tabs.
Also applies to: 55-55
CARE
|
||||||||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
khavinshankar/fix/fix-pluggable-blinking-issue
|
| Run status |
|
| Run duration | 07m 18s |
| Commit |
|
| Committer | Khavin Shankar |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
10
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/e2e/patient_spec/patient_encounter.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Patient Encounter Questionnaire > Create a new ABG questionnaire and verify the values |
Test Replay
Screenshots
|
|
|
@khavinshankar Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Wrapping the components with Suspense fixed the issue.
Summary by CodeRabbit