Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#1,757 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
4g 11h
PR unite (30g)
35

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.