STIT-611 Show resource list when fetching new data - #210
Open
jasonbrownrmi wants to merge 2 commits into
Open
Conversation
… table while loading ResourcesTable returned null whenever its resources array was empty, so the whole table (including rows the user was just looking at) disappeared during every refetch triggered by an initial load, page change, filter, or sort, snapping back once data arrived. Render pageSize-agnostic skeleton rows instead, sized to match a populated row's height. The skeleton row count tracks the last confirmed row count (including confirmed empty results) rather than a fixed page size, so a refetch shows as many placeholder rows as were actually on screen before it started.
…keleton rows Replace the skeleton-row approach with TanStack Query's placeholderData: keepPreviousData on the resources list query, so data never resets to undefined mid-refetch. The previous page's rows simply stay on screen, dimmed with a spinner overlay while isFetching is true, instead of needing to reconstruct placeholder rows sized to match a row count from the prior render.
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:12 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:12 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:14 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:14 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:14 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:15 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:15 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:15 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prevents the resources table from disappearing during TanStack Query refetches (paging/filtering/sorting) by keeping prior list data on screen while the next request is in flight, and adds UI affordances to indicate the “updating” state.
Changes:
- Added
placeholderData: keepPreviousDatato the resources list query so prior results remain visible during refetch. - Passed
isFetchingintoResourcesTableand added a dimmed + spinner overlay “updating” state. - Added unit tests for the query option and the table’s fetching-state UI behavior.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| deployments/stitch-frontend/src/queries/resources.js | Keeps previous list data during refetch via placeholderData: keepPreviousData. |
| deployments/stitch-frontend/src/queries/resources.test.js | Verifies the list query config includes placeholderData: keepPreviousData. |
| deployments/stitch-frontend/src/components/ResourcesView.jsx | Plumbs isFetching into the table so it can render a refetching state. |
| deployments/stitch-frontend/src/components/ResourcesTable.jsx | Dims the table and overlays a spinner + SR announcement while refetching. |
| deployments/stitch-frontend/src/components/ResourcesTable.test.jsx | Adds coverage for empty state, normal state, and refetching state UI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+94
to
+97
| <table | ||
| className={`w-full text-sm transition-opacity ${isFetching ? "pointer-events-none opacity-50" : ""}`} | ||
| aria-busy={isFetching || undefined} | ||
| > |
jasonbrownrmi
temporarily deployed
to
development
July 31, 2026 23:16 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
CD summary
|
| service | url | fqdn |
|---|---|---|
| api | open | pr-210-api.purplegrass-c07d0a94.westus2.azurecontainerapps.io |
| entity-linkage | open | pr-210-entity-linkage.purplegrass-c07d0a94.westus2.azurecontainerapps.io |
| frontend | https://witty-mushroom-017a3dc1e-210.westus2.1.azurestaticapps.net | |
| stitch-llm | open | pr-210-stitch-llm.purplegrass-c07d0a94.westus2.azurecontainerapps.io |
Database (1)
| db_name | postgres_host | postgres_port | postgres_db |
|---|---|---|---|
| pr_210 | stitch-dev.postgres.database.azure.com |
5432 |
pr_210 |
Jobs (2)
| job | image | postgres_db | api_url | auth_mode |
|---|---|---|---|---|
| db-migrations | ghcr.io/rmi/stitch-api:pr-210@sha256:618cafe0b050200423ed9ec68ff3ae03e0cc45c334e6e9df86bb0f63de7816ca |
pr_210 |
||
| seed | ghcr.io/rmi/stitch-seed:pr-210@sha256:1241fa3101f81feec04dcc36ec684beb0a0bfa68289c6ae8fef513bed8071010 |
https://pr-210-api.purplegrass-c07d0a94.westus2.azurecontainerapps.io/api/v1 |
stitch-client-bearer-token |
Images (4)
| build_time | commit_time | git_sha | image | image_digest |
|---|---|---|---|---|
| 2026-07-31T23:13:15Z | 2026-07-31T23:12:50Z | eb4996b | ghcr.io/rmi/stitch-api:pr-210 |
ghcr.io/rmi/stitch-api:pr-210@sha256:618cafe0b050200423ed9ec68ff3ae03e0cc45c334e6e9df86bb0f63de7816ca |
| 2026-07-31T23:13:15Z | 2026-07-31T23:12:50Z | eb4996b | ghcr.io/rmi/stitch-entity-linkage:pr-210 |
ghcr.io/rmi/stitch-entity-linkage:pr-210@sha256:e5dac894067ebba8d128362c9baa694a4a8670c146ae9904c487efe146292bd5 |
| 2026-07-31T23:13:10Z | 2026-07-31T23:12:50Z | eb4996b | ghcr.io/rmi/stitch-seed:pr-210 |
ghcr.io/rmi/stitch-seed:pr-210@sha256:1241fa3101f81feec04dcc36ec684beb0a0bfa68289c6ae8fef513bed8071010 |
| 2026-07-31T23:13:10Z | 2026-07-31T23:12:50Z | eb4996b | ghcr.io/rmi/stitch-stitch-llm:pr-210 |
ghcr.io/rmi/stitch-stitch-llm:pr-210@sha256:2576f1c8042b6dfc78e06a3b2fe9761132a34e534791831ae351f1442350ac15 |
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
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.
ResourcesTable returned null whenever its resources array was empty, so the whole table (including rows the user was just looking at) disappeared during every refetch triggered by an initial load, page change, filter, or sort, snapping back once data arrived.
ResourcesTablereturnednullwheneverresourceswas empty, andresourcesreset to[]while the query was in flight (datawasundefineduntil the fetch resolved).placeholderData: keepPreviousData(TanStack Query v5) to the resources list query inqueries/resources.js, sodatano longer resets toundefinedmid-refetch — the previously loaded page's rows simply stay on screen for the duration of the new fetch.ResourcesTablenow dims to 50% opacity and shows a centered spinner overlay whileisFetchingis true, witharia-busyon the table and ansr-only"Updating resources..." announcement for screen readers. The dimmed table is also non-interactive (pointer-events-none) for the duration of the fetch.ResourcesViewkeeps its plain "Loading resources..." text for the one case that still needs it: the very first load ever, before any data has arrived (there's nothing yet to dim).