Add loading & progress feedback to the entity export modal#29755
Open
anuj-kumary wants to merge 4 commits into
Open
Add loading & progress feedback to the entity export modal#29755anuj-kumary wants to merge 4 commits into
anuj-kumary wants to merge 4 commits into
Conversation
anuj-kumary
added
safe to test
Contributor
Jest test CoverageUI tests summary
|
chirag-madlani
approved these changes
Jul 6, 2026
Contributor
🔴 Playwright Results — 1 failure(s), 26 flaky✅ 4478 passed · ❌ 1 failed · 🟡 26 flaky · ⏭️ 37 skipped
Genuine Failures (failed on all attempts)❌
|
Code Review ✅ ApprovedImproves entity export modal responsiveness by implementing a double-rAF yield to force a UI paint before blocking DOM operations and adds spinner feedback to CSV exports. No issues found. OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Describe your changes:
Fix: image/PDF loader now paints immediately.
flushSynccommitted the loading state but the browser couldn't paint it beforehtml-to-image's synchronous DOM cloning blocked the main thread, so the disabled/loading button only appeared after the export finished. Added a double-requestAnimationFrameyield so the loading state paints before the blocking work.Screen.Recording.2026-07-06.at.11.55.08.AM.mov
Type of change:
High-level design:
N/A — small change.
Tests:
Use cases covered
Unit tests
Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI screen recording / screenshots:
Not applicable.
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Greptile Summary
This PR fixes a paint-ordering issue in the entity export modal where the loading state (spinner + disabled button) was not visible to the user before
html-to-image's synchronous DOM cloning blocked the main thread. It also simplifies theisLoadingprop on the submit button to be consistent across all export types.requestAnimationFrameyield is added afterflushSyncon the non-CSV export path so the browser completes at least one paint cycle before the blockingexportMethodBasedOnTypecall begins (~2 frames, ≈33 ms at 60 fps — imperceptible to users).isLoadingis simplified fromselectedExportType !== ExportTypes.CSV && downloadingto justdownloading, so the button consistently shows a loading spinner during all export types.Confidence Score: 5/5
Safe to merge — two small, well-targeted changes with no new async pitfalls or regressions.
The double-rAF pattern is the canonical way to guarantee a browser paint between a synchronous state flush and a main-thread-blocking call. Error handling and component teardown are both handled correctly before and after the new await. The isLoading simplification removes an unnecessary condition without altering any functional branch.
No files require special attention.
Important Files Changed
Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram participant User participant Button participant React participant Browser participant htmlToImage User->>Button: Click Export (non-CSV) Button->>React: handleExport() React->>React: flushSync → setDownloading(true) Note over React,Browser: State committed to DOM React->>Browser: "requestAnimationFrame #1" Browser->>Browser: "requestAnimationFrame #2" Browser-->>React: resolve() — browser has painted loading state Note over Button: Spinner & disabled state visible ✓ React->>htmlToImage: exportMethodBasedOnType() [blocks main thread] htmlToImage-->>React: export complete React->>React: handleCancel() + setDownloading(false) React->>Browser: Re-render (modal closed)%%{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"}}}%% sequenceDiagram participant User participant Button participant React participant Browser participant htmlToImage User->>Button: Click Export (non-CSV) Button->>React: handleExport() React->>React: flushSync → setDownloading(true) Note over React,Browser: State committed to DOM React->>Browser: "requestAnimationFrame #1" Browser->>Browser: "requestAnimationFrame #2" Browser-->>React: resolve() — browser has painted loading state Note over Button: Spinner & disabled state visible ✓ React->>htmlToImage: exportMethodBasedOnType() [blocks main thread] htmlToImage-->>React: export complete React->>React: handleCancel() + setDownloading(false) React->>Browser: Re-render (modal closed)Reviews (4): Last reviewed commit: "Merge branch 'main' into export-loader" | Re-trigger Greptile