Feature/loading overlay

[interim17]

Problem

Closes #136 and #137

Made a new branch because merge conflicts were bumming me out.

Solution

Conditionally render overlay, spinner and text based on state of the app.

Notable changes:

• add derived selectors for useIsLoading and useIsModified
• add edits field to PackingResult type to store a snapshot of edits related to that packing job. Used for comparison to recipe edits in isModified.
• in themeRoot I wrapped the app in a div with dark-theme and light-theme class names so we can access the theme in downstream components that are not handled fully by the antd theme provider.

Screenshots show some small spacing issues that were solved by pointing this branch at fix/vertical-spacing

In terms of viewer overlay I think the most important thing is that the overlay and the viewer are the same size.

• New feature (non-breaking change which adds functionality)

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	18.52%	368 / 1986
🔵	Statements	18.52%	368 / 1986
🔵	Functions	38.09%	24 / 63
🔵	Branches	69.23%	81 / 117

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
src/App.tsx	0%	0%	0%	0%	1-7, 17-20, 22, 24-25, 27-28, 30-37, 39, 41-43, 45-51, 53-67, 69-112, 114-122, 124-161, 163-167, 169-173, 175-194, 196, 198
src/components/PackingInput/index.tsx	0%	0%	0%	0%	1-2, 13-19, 25, 35-40, 42-46, 48-53, 55-59, 61-64, 67-69, 71-73, 75, 78-80, 82-92, 94-95, 97-104, 106-111, 113-120, 122-125, 127, 129, 131
src/components/Viewer/index.tsx	0%	0%	0%	0%	1-4, 6-10, 12-18, 20-21, 23-34, 36-39, 41, 43, 45
src/state/constants.ts	0%	100%	100%	0%	4-12
src/state/store.ts	0%	0%	0%	0%	1, 51, 53-59, 61-63, 65, 67-70, 72-86, 88-89, 91-92, 94-96, 99-101, 104, 107-115, 117-119, 121-123, 125-128, 130-138, 140-151, 153-164, 166-168, 170, 172-177, 179-188, 190-193, 196-205, 208-214, 216-217, 219-227, 229-246, 248-264, 267-274, 276-281, 283-288, 290-295, 297-302, 304-308, 310-314, 316-317, 321-323, 325-328, 330-333, 335-338, 340-343, 345-356, 358-362, 365-380
src/style/themeRoot.tsx	0%	0%	0%	0%	1, 5-9, 11-17, 19-24, 26
src/types/index.ts	100%	100%	100%	100%

Generated in workflow #197

[github-actions]

PR Preview Action v1.6.2
🚀 View preview at https://AllenCell.github.io/cellpack-client/pr-preview/pr-162/
Built to branch gh-pages at 2025-11-19 22:35 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Copilot]

Pull Request Overview

This PR adds a loading overlay to the viewer to display the current state of the packing job. The overlay shows different messages based on whether data is loading, packing is running, or results have been modified since the last run.

Key changes:

• Added edits field to PackingResult to track recipe state at packing time
• Created derived selectors useIsLoading and useIsModified to determine overlay state
• Implemented viewer overlay with conditional rendering and theme-aware styling

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/types/index.ts	Added edits field to PackingResult type
src/state/constants.ts	Updated EMPTY_PACKING_RESULT with empty edits object
src/state/store.ts	Added useIsLoading and useIsModified selector hooks
src/style/themeRoot.tsx	Wrapped app in theme-specific div for CSS targeting
src/components/Viewer/style.css	Added styling for overlay and theme-specific colors
src/components/Viewer/index.tsx	Implemented overlay with conditional rendering logic
src/components/PackingInput/index.tsx	Refactored to use useIsLoading hook
src/App.tsx	Updated to capture and store edits in packing results

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[meganrm]

Can you re-merge main on this? It seems to have a lot of changes in the changeset that have already been merged

[ascibisz]

On the preview link, it seems like the "Running..." overlay is removed slightly too early. When I trigger a re-run, the "Running..." overlay shows up as expected, but when the packing is complete and the overlay is removed, I see the previous result for a second, then it kinda flashes, then the new result shows up.

Not sure what the best way to handle this is, but maybe we could at least clear out the old result URL in the simularium viewer while the job is running so if we show the simularium viewer early, it's a blank viewer? Or somehow make sure the Viewer has been updated with the correct result URL before we remove the overlay?