Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Assignment lists, dashboard dialogs and the record view show empty, error or blank states while their data is still loading

Open
  • Is something wrong?
#1,757 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the named component, route, hook, and test files under apps/web; the issue identifies the affected views and expected loading, empty, and error states. Run the cited tests, then check the remote-assignments Playwright spec with a delayed assignments request. Done when loading is not presented as an empty or error result and instrument failures are visible in both callers.

Written by the indexing model from the issue text.

Description

Area: Web Bug Difficulty: Medium Priority: Medium

Several apps/web views read a plain useQuery, or the useInstrument hook, that no route loader prefetches. While the data loads they render undefined as though it were the final answer: an empty list, a "no results" message, an error message, zeros, or a blank page. Two of them also stay blank for good if the instrument fails to load. This is the same defect #1670 describes for the admin Instruments page, in the places that issue does not cover.

Where

Delete Assignments says there are none. apps/web/src/components/DeleteRemoteAssignments/DeleteRemoteAssignments.tsx:54, :62-64 and :127-134. useAssignmentsQuery is not prefetched by group/remote-assignments.tsx's loader, so rows is [] until the request returns:

const deletableAssignments = (assignmentsQuery.data ?? []).filter(...);
// ...
{rows.length === 0 ? (
  <p className="text-muted-foreground py-8 text-center text-sm italic">
    {t({ en: 'No outstanding or expired assignments in this group.', ... })}

A subject's Assignments tab is empty. apps/web/src/routes/_app/datahub/subjects/$subjectId/assignments.tsx:154-169. The route has no loader and renders assignmentsQuery.data ?? []. The table shows only its headers while loading, and it shows exactly the same thing when the subject really has no assignments, because there is no empty state at all.

Dashboard dialogs report errors and zero counts. apps/web/src/routes/_app/dashboard.tsx:282-290 and :355-363 print "Error finding instruments" / "Error finding records" whenever instrumentInfo is undefined, which is exactly the loading state, since a failed query throws to the error boundary. Until the records request returns, every row in "Number of Records" reads 0 (:56-65). (That request downloads every record in the group, see #1714, so the window can be long.)

Record view and CSV upload page render nothing. apps/web/src/hooks/useInstrument.ts:16-29 returns null both while the bundle loads and after interpretation fails (the error is only console.errored). Both callers render null for it:

// datahub/subjects/$subjectId/table/$recordId.tsx:126-130
const instrument = useInstrument(instrumentRecord.instrumentId);
if (!instrument) {
  return null;
}

upload/$instrumentId.tsx:148-150 does the same. The page body stays empty, with no spinner, while the bundle downloads, and stays empty for good if the bundle cannot be interpreted.

Reproduce

  1. Throttle the network in devtools (e.g. Slow 4G).
  2. Open Group Actions → Remote Assignments → Delete Assignments for a group with outstanding assignments.
  3. Open a subject's Assignments tab, the dashboard's Total Instruments / Total Records cards, and Datahub → a subject → Table → View on a record.

Actual: "No outstanding or expired assignments in this group.", an empty assignments table, "Error finding instruments" and a column of zeros, and a blank record page, each until the data arrives.
Expected: a loading indicator until the data is known, a real empty state (e.g. "No assignments yet") only when the result is empty, and a visible error if the instrument fails to load.

Tests

  • apps/web/src/components/DeleteRemoteAssignments/__tests__/DeleteRemoteAssignments.test.tsx: it('should not say there are no assignments while they are still loading').
  • apps/web/src/routes/_app/datahub/subjects/$subjectId/__tests__/assignments.test.tsx: it('should show an empty state only once the assignments have loaded and there are none').
  • apps/web/src/routes/_app/__tests__/dashboard.test.tsx: it('should not show an error in the instruments dialog while the instrument list is loading').
  • apps/web/src/routes/_app/datahub/subjects/$subjectId/table/__tests__/$recordId.test.tsx: it('should show a loading state while the instrument loads, and an error if it fails to interpret').
  • testing/src/specs/remote-assignments-wizard.spec.ts: delay GET /v1/assignments with page.route and assert the "No outstanding or expired assignments" text never appears before the rows.

Suggested fix

Prefetch the assignment queries in their route loaders (assignmentsQueryOptions already exists) and read them with useSuspenseQuery, or branch on isPending to render LoadingFallback. Give the dashboard dialogs a pending state instead of the error text. Make useInstrument return a status (LOADING / ERROR / DONE, as useInterpretedInstrument in react-core already does), so its callers can show a spinner and rethrow interpretation errors to the error boundary instead of rendering null.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 4h
Merged PRs (30d)
44

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.