Replace LoadingSpinner with shadcn Spinner and improve accessibility#405
Conversation
…ie Banner, and fixed "Back to previous page" navigation on error pages.
🦋 Changeset detectedLatest commit: ce7b58e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughReplaces a legacy LoadingSpinner with a standardized Spinner across the app (35+ files), deletes the legacy spinner component, and applies accessibility tweaks to the Cookie Banner and programmatic navigation for error pages. Version bumped as a patch. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## development #405 +/- ##
============================================
Coverage 87.47% 87.47%
============================================
Files 91 91
Lines 4559 4559
Branches 1391 1391
============================================
Hits 3988 3988
Misses 571 571
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
coderabbitai
Bot
changed the title
coderabbitai
Bot
added
branch:development
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
fdm-app/app/components/custom/banner.tsx (1)
123-135: Excellent accessibility improvements!The implementation correctly replaces a raw icon with a proper Button component that includes:
- Semantic button wrapper for better keyboard navigation and screen reader support
- Clear
aria-labelfor assistive technologies- Proper vertical alignment with
items-center- Consistent icon sizing (
h-5 w-5for Cookie,h-4 w-4for X withinh-8 w-8button)Optional: Consider a more descriptive aria-label
For enhanced screen reader context, you could make the aria-label more specific:
- aria-label="Sluiten" + aria-label="Sluit cookie banner"This provides users with more context about what will be closed, though the current implementation is already functional and accessible.
fdm-app/app/components/custom/error.tsx (1)
3-3: Good fix! Consider adding a defensive fallback for edge cases.The navigation implementation now correctly uses
navigate(-1)to go back in browser history, which aligns with the button label "Terug naar vorige pagina" (Back to previous page). This is a clear improvement over the previous behavior.However, consider handling the edge case where there's no previous page in the history (e.g., user opened the error page via direct link or in a new tab). In such cases,
navigate(-1)might navigate outside the app or do nothing, leaving the user stuck.🛡️ Suggested defensive implementation
Check history length before navigating back, with a fallback to home:
- <Button onClick={() => navigate(-1)}> + <Button onClick={() => { + if (window.history.length > 1) { + navigate(-1) + } else { + navigate("/") + } + }}> <ArrowLeft className="mr-2 h-4 w-4" /> Terug naar vorige pagina </Button>Alternatively, you could update the button text dynamically based on available history, or always show both navigation options for 404 errors.
Also applies to: 35-35, 81-84
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (35)
.changeset/forty-lies-find.mdfdm-app/app/components/blocks/access/invitation-form.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/components/blocks/atlas/atlas-legend.tsxfdm-app/app/components/blocks/atlas/atlas-panels.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/cultivation/form-add.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/components/blocks/fertilizer-applications/form.tsxfdm-app/app/components/blocks/fertilizer-applications/list.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/harvest/form.tsxfdm-app/app/components/blocks/mijnpercelen/form-upload.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/soil/form-upload.tsxfdm-app/app/components/blocks/soil/form.tsxfdm-app/app/components/blocks/soil/list.tsxfdm-app/app/components/custom/autocomplete.tsxfdm-app/app/components/custom/banner.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/custom/loadingspinner.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.create._index.tsxfdm-app/app/routes/organization.new.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/signin.check-your-email.tsxfdm-app/app/routes/signin.verify.tsxfdm-app/app/routes/welcome.tsx
💤 Files with no reviewable changes (1)
- fdm-app/app/components/custom/loadingspinner.tsx
🧰 Additional context used
🧠 Learnings (31)
📚 Learning: 2025-12-15T12:19:47.858Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 376
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.elevation.tsx:187-213
Timestamp: 2025-12-15T12:19:47.858Z
Learning: When reviewing code, prefer storing only non-sensitive UI/state data in sessionStorage. For map viewState (e.g., longitude/latitude), ensure it represents non-personal business data and that persistence across sessions is justified, documented, and respects user privacy. If persisting, use a clearly scoped, namespaced key, guard access with try/catch, and avoid syncing with servers or exposing data to third-party scripts. Apply this guideline to all TSX files that manage client-side UI state.
Applied to files:
fdm-app/app/components/blocks/soil/form-upload.tsxfdm-app/app/routes/organization.new.tsxfdm-app/app/components/custom/banner.tsxfdm-app/app/components/blocks/fertilizer-applications/list.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/components/blocks/fertilizer-applications/form.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/custom/autocomplete.tsxfdm-app/app/components/blocks/atlas/atlas-panels.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/atlas/atlas-legend.tsxfdm-app/app/components/blocks/access/invitation-form.tsxfdm-app/app/components/blocks/mijnpercelen/form-upload.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/components/blocks/soil/list.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/routes/signin.verify.tsxfdm-app/app/components/blocks/soil/form.tsxfdm-app/app/routes/signin.check-your-email.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/components/blocks/cultivation/form-add.tsxfdm-app/app/routes/farm.create._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsxfdm-app/app/components/blocks/harvest/form.tsx
📚 Learning: 2025-04-18T14:51:48.033Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 124
File: fdm-core/src/organization.ts:300-339
Timestamp: 2025-04-18T14:51:48.033Z
Learning: The `getUsersInOrganization` function in fdm-core/src/organization.ts will be updated in commit b17fac16c9e5a0de56d0346e712b2ce966d305d5 to include id and email fields, which are necessary for subsequent role updates and user removal operations.
Applied to files:
fdm-app/app/routes/organization.new.tsx
📚 Learning: 2024-12-16T10:48:27.598Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 16
File: fdm-app/package.json:40-40
Timestamp: 2024-12-16T10:48:27.598Z
Learning: In the `fdm-app/package.json` file, `remix-toast` and `sonner` are not duplicate dependencies. `remix-toast` manages toast generation and handling within the Remix framework, while `sonner` provides the actual implementation and UI of the toast notifications. They serve different purposes and are intended to be used together in the project.
Applied to files:
fdm-app/app/routes/organization.new.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The `FarmLayout` component in `components/custom/farm-layout.tsx` provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Applied to files:
fdm-app/app/routes/organization.new.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.create._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-06-02T10:31:27.097Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 151
File: fdm-app/app/routes/signin._index.tsx:101-101
Timestamp: 2025-06-02T10:31:27.097Z
Learning: In fdm-app/app/routes/signin._index.tsx, the redirect destinations are intentionally inconsistent by design: the component defaults new sign-ins to "/welcome" (line 101) while the loader redirects authenticated users to "/farm" (line 80) and the action uses "/farm" as fallback (line 434). This creates appropriate user flows where new users complete their profile via the welcome page, while existing authenticated users bypass it and go directly to the main application.
Applied to files:
fdm-app/app/routes/organization.new.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/routes/signin.verify.tsxfdm-app/app/routes/signin.check-your-email.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/routes/farm.create._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-05-09T14:41:43.484Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, making importing from "remix-run/react" unnecessary.
Applied to files:
fdm-app/app/routes/organization.new.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/access/invitation-form.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-05-09T14:41:43.484Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 138
File: fdm-app/app/components/custom/fertilizer-applications/form.tsx:6-6
Timestamp: 2025-05-09T14:41:43.484Z
Learning: The project uses React Router v7 which exports a Form component directly from the "react-router" package, not from "remix-run/react".
Applied to files:
fdm-app/app/routes/organization.new.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/access/invitation-form.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-04-18T13:49:17.029Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 124
File: fdm-app/app/components/custom/farm/farm-title.tsx:3-3
Timestamp: 2025-04-18T13:49:17.029Z
Learning: In the fdm project, NavLink and other routing components can be imported from either "react-router" or "react-router-dom" as react-router-dom is included in react-router.
Applied to files:
fdm-app/app/components/blocks/fertilizer-applications/list.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/components/blocks/atlas/atlas-panels.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/soil/list.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/blocks/farm/delete.tsx
📚 Learning: 2024-12-16T10:56:07.561Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 16
File: fdm-app/app/routes/app.addfarm.$b_id_farm.cultivations.$b_lu_catalogue.fertilizers.tsx:1-1
Timestamp: 2024-12-16T10:56:07.561Z
Learning: The project uses `react-router` v7, and the `data` function is exported and used for error handling in loaders and actions.
Applied to files:
fdm-app/app/components/blocks/fertilizer-applications/list.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/components/blocks/atlas/atlas-panels.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/soil/list.tsxfdm-app/app/components/custom/error.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component `FarmLayoutBase` has been created in `components/custom/farm-layout-base.tsx` to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.create._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-09-23T12:29:34.184Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 274
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:160-163
Timestamp: 2025-09-23T12:29:34.184Z
Learning: In the FDM application, the fertilizer application route intentionally uses `${calendar}/field/fertilizer` instead of the originally planned `/farm/{farmId}/add/fertilizer` structure. This design decision prioritizes starting from the field list view to provide better field selection workflow before applying fertilizer, rather than direct dashboard-to-action navigation.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-05-09T14:53:44.578Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:53:44.578Z
Learning: In the context of this React Router v7 project, it's important to follow the pattern of importing only the types (like UseFormReturn) from "react-hook-form" while importing the Form component from "react-router" to avoid naming conflicts.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/components/blocks/fertilizer-applications/form.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/blocks/atlas/atlas-panels.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/access/invitation-form.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/soil/form.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx
📚 Learning: 2025-05-09T14:58:10.465Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 138
File: fdm-app/app/components/custom/combobox.tsx:34-37
Timestamp: 2025-05-09T14:58:10.465Z
Learning: When updating React components that use both react-hook-form and React Router v7, it's important to only import types (like UseFormReturn, FieldValues) from react-hook-form to avoid naming conflicts with React Router's Form component. Use `import type { ... } from 'react-hook-form'` syntax to ensure only types are imported.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsxfdm-app/app/components/blocks/fertilizer-applications/form.tsxfdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/access/invitation-form.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/blocks/farm/delete.tsx
📚 Learning: 2024-12-19T13:20:44.152Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 23
File: fdm-app/app/routes/app.addfarm.new.tsx:15-17
Timestamp: 2024-12-19T13:20:44.152Z
Learning: Authentication for the “app.addfarm.new” route is already handled globally in “fdm-app/app/routes/app.tsx,” automatically redirecting unauthenticated users to the SignIn page.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.settings.properties.tsxfdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsxfdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.create._index.tsx
📚 Learning: 2025-01-14T16:06:21.832Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 45
File: fdm-app/app/routes/farm.$b_id_farm.settings._index.tsx:1-1
Timestamp: 2025-01-14T16:06:21.832Z
Learning: In the fdm project, `redirect` and other routing utilities should be imported from `react-router` instead of `react-router-dom`.
Applied to files:
fdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/nutrient-advice/kpi.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.create._index.tsx
📚 Learning: 2025-01-14T16:06:24.294Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 45
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:1-1
Timestamp: 2025-01-14T16:06:24.294Z
Learning: In the fdm-app codebase, the `redirect` function should be imported from `react-router`, not `react-router-dom`.
Applied to files:
fdm-app/app/components/blocks/access/principal-row.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/routes/signin.verify.tsxfdm-app/app/components/blocks/field/delete.tsxfdm-app/app/components/custom/error.tsxfdm-app/app/components/blocks/farm/delete.tsxfdm-app/app/routes/farm.create._index.tsx
📚 Learning: 2024-12-16T10:56:33.616Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 16
File: fdm-app/app/components/custom/combobox.tsx:35-37
Timestamp: 2024-12-16T10:56:33.616Z
Learning: When using `useRemixForm`, the correct type for the `form` prop is `UseRemixFormReturn<T>` from `remix-hook-form`, not `UseFormReturn` from `react-hook-form`.
Applied to files:
fdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/cultivation/card-details.tsxfdm-app/app/components/blocks/access/invitation-form.tsx
📚 Learning: 2024-12-16T11:28:58.089Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 16
File: fdm-app/app/components/custom/combobox.tsx:35-37
Timestamp: 2024-12-16T11:28:58.089Z
Learning: When using `UseRemixFormReturn` from `remix-hook-form`, it is not a generic type and should be used without type parameters.
Applied to files:
fdm-app/app/routes/signin._index.tsxfdm-app/app/routes/welcome.tsxfdm-app/app/components/blocks/field/form.tsxfdm-app/app/components/blocks/access/invitation-form.tsx
📚 Learning: 2025-01-31T16:06:33.810Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/routes/farm.create.$b_id_farm.atlas.tsx:164-212
Timestamp: 2025-01-31T16:06:33.810Z
Learning: Map configuration in the application should be modularized using the `useMapConfig` hook and `MapControls` component to maintain consistency across all MapGL instances.
Applied to files:
fdm-app/app/components/blocks/atlas/atlas-panels.tsx
📚 Learning: 2025-06-10T13:10:03.154Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 161
File: fdm-app/app/components/blocks/field-map.tsx:0-0
Timestamp: 2025-06-10T13:10:03.154Z
Learning: When facing prop name inconsistencies with react-map-gl (like mapboxAccessToken vs mapboxApiAccessToken), using different import statements can resolve the issue more elegantly than changing prop names across multiple files.
Applied to files:
fdm-app/app/components/blocks/atlas/atlas-panels.tsx
📚 Learning: 2025-01-31T15:06:35.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/components/custom/atlas/atlas-sources.tsx:21-66
Timestamp: 2025-01-31T15:06:35.764Z
Learning: In react-map-gl components, when querying rendered features via map.queryRenderedFeatures(), the effect's dependency array must include any props that affect the map's rendered state (like source data) to ensure features are queried against the current map state.
Applied to files:
fdm-app/app/components/blocks/atlas/atlas-panels.tsx
📚 Learning: 2025-09-23T12:27:07.391Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 274
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:151-204
Timestamp: 2025-09-23T12:27:07.391Z
Learning: In the FDM application, field overview functionality is implemented as a dedicated page accessible via `farm/{farmId}/{calendar}/field` rather than as a direct listing on the dashboard. The dashboard includes a "Perceelsoverzicht" quick action card that provides navigation to this comprehensive field management interface.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsx
📚 Learning: 2025-08-11T12:24:32.200Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 233
File: fdm-app/app/components/blocks/atlas-fields/cultivation-history.tsx:53-53
Timestamp: 2025-08-11T12:24:32.200Z
Learning: In `fdm-app/app/components/blocks/atlas-fields/cultivation-history.tsx`, the NMI API for cultivations guarantees that each year will be unique in the cultivation history data, so using `cultivation.year` as a React list key is safe and won't cause duplicate key warnings.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
📚 Learning: 2025-09-26T08:34:50.413Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 279
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx:277-283
Timestamp: 2025-09-26T08:34:50.413Z
Learning: In the fdm project, fdm-core and fdm-app are updated together as part of a monorepo structure, which eliminates legacy data concerns when new fields like b_isproductive are introduced. Both packages are synchronized, so there's no need for defensive coding against undefined values for newly introduced database fields.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
📚 Learning: 2025-09-23T12:37:58.711Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 274
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.field._index.tsx:113-148
Timestamp: 2025-09-23T12:37:58.711Z
Learning: In the FDM application, the current field data fetching implementation using Promise.all with individual API calls (getCultivations, getFertilizerApplications, getCurrentSoilData) performs acceptably even with farms containing 90+ fields. No performance issues have been observed in practice with this approach.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in `components/custom/farm-layouts/` with `BaseFarmLayout` and `FarmSidebarLayout` components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx
📚 Learning: 2025-08-13T11:05:40.105Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 237
File: fdm-data/src/cultivations/catalogues/brp.ts:65-68
Timestamp: 2025-08-13T11:05:40.105Z
Learning: In fdm-app Select components, using `undefined` instead of empty string (`""`) as fallback value prevents empty strings from being submitted as form values. This approach fixes the issue at the UI source rather than requiring backend validation.
Applied to files:
fdm-app/app/components/blocks/field/form.tsx
📚 Learning: 2025-02-24T10:49:54.523Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 84
File: fdm-app/app/root.tsx:89-145
Timestamp: 2025-02-24T10:49:54.523Z
Learning: In the ErrorBoundary component of fdm-app/app/root.tsx, all client errors (400, 401, 403, 404) are intentionally displayed with a 404 status code for security purposes.
Applied to files:
fdm-app/app/components/custom/error.tsx
📚 Learning: 2025-02-18T11:00:54.405Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, to ensure error pages are displayed correctly:
1. Export the ErrorBoundary component from the root route
2. Include the Scripts component in the Layout
3. Export the Layout through the default App component
Applied to files:
fdm-app/app/components/custom/error.tsx
📚 Learning: 2025-02-18T11:00:54.405Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 81
File: fdm-app/app/root.tsx:79-79
Timestamp: 2025-02-18T11:00:54.405Z
Learning: In React Router v7+, error boundaries should:
1. Use the useRouteError hook to access the error
2. Be configured using the errorElement prop in route configuration
3. Include proper error type checking using isRouteErrorResponse
Applied to files:
fdm-app/app/components/custom/error.tsx
📚 Learning: 2025-02-13T09:03:11.890Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 71
File: fdm-app/app/routes/farm.create.$b_id_farm.cultivations.$b_lu_catalogue.crop.harvest._index.tsx:111-135
Timestamp: 2025-02-13T09:03:11.890Z
Learning: When adding multiple harvests in fdm-app, use Promise.all instead of Promise.allSettled to ensure atomic behavior - if one harvest addition fails, all should fail and rollback to maintain data consistency.
Applied to files:
fdm-app/app/components/blocks/harvest/form.tsx
🔇 Additional comments (36)
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.fertilizer._index.tsx (1)
30-30: LGTM! Clean component replacement.The import and usage update from LoadingSpinner to Spinner is correct. The addition of
className="mr-2"properly maintains spacing with the adjacent loading text.Also applies to: 246-246
fdm-app/app/routes/organization.new.tsx (1)
17-17: LGTM! Straightforward component replacement.The Spinner component correctly replaces LoadingSpinner in the submit button's loading state.
Also applies to: 214-214
fdm-app/app/components/blocks/soil/list.tsx (1)
5-5: LGTM! Correct component replacement.The Spinner component properly replaces LoadingSpinner in the delete button's loading state, maintaining the existing UX pattern.
Also applies to: 113-113
fdm-app/app/components/blocks/soil/form.tsx (1)
10-10: LGTM! Proper component replacement.The Spinner component correctly replaces LoadingSpinner in the form's submit button loading state.
Also applies to: 239-239
fdm-app/app/components/blocks/access/invitation-form.tsx (1)
8-8: LGTM! Clean component migration.The Spinner component correctly replaces LoadingSpinner in the invitation button's loading state.
Also applies to: 104-104
fdm-app/app/components/blocks/cultivation/form-add.tsx (2)
8-8: LGTM! Import updated to standardized Spinner component.The import correctly references the new shadcn Spinner component.
110-110: LGTM! Spinner component correctly integrated.The Spinner component is properly used in the loading state of the submit button.
.changeset/forty-lies-find.md (1)
1-5: LGTM! Changeset properly documents the changes.The changeset correctly specifies a patch release and accurately describes both the accessibility improvements and the LoadingSpinner replacement.
fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx (2)
17-17: LGTM! Import correctly updated.The import statement properly references the standardized Spinner component.
389-389: LGTM! Spinner integrated correctly in upload flow.The Spinner component is appropriately used in the uploading state of the shapefile upload button.
fdm-app/app/components/blocks/soil/form-upload.tsx (2)
9-9: LGTM! Import statement updated correctly.The import properly references the new Spinner component from the UI library.
211-211: LGTM! Spinner properly integrated in upload button.The Spinner component is correctly used in the submitting state of the soil analysis upload button.
fdm-app/app/components/blocks/access/principal-row.tsx (2)
6-6: LGTM! Import correctly updated.The import statement properly references the standardized Spinner component.
103-103: LGTM! Spinner correctly integrated with fetcher state.The Spinner component is appropriately rendered during form submission, using a conditional check on
fetcher.state.fdm-app/app/routes/farm.$b_id_farm.settings.properties.tsx (1)
16-16: LGTM! Clean migration to standardized Spinner component.The replacement of LoadingSpinner with the shadcn Spinner component is implemented correctly. The import path and usage are updated consistently, with no changes to the submission logic or conditional rendering.
Also applies to: 270-270
fdm-app/app/routes/signin.check-your-email.tsx (1)
10-10: LGTM! Spinner component integrated correctly.The migration from LoadingSpinner to Spinner is clean and maintains the existing verification flow behavior.
Also applies to: 124-124
fdm-app/app/components/blocks/fertilizer-applications/form.tsx (1)
12-12: LGTM! Spinner component correctly implemented.The replacement maintains the existing form submission behavior while adopting the standardized UI component.
Also applies to: 296-296
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.$b_id.overview.tsx (1)
22-22: LGTM! Spinner migration completed correctly.The component replacement is clean and maintains all existing form submission logic and permission checks.
Also applies to: 245-245
fdm-app/app/components/blocks/harvest/form.tsx (1)
11-11: LGTM! Comprehensive Spinner migration across both form variants.All four instances of LoadingSpinner have been correctly replaced with Spinner in both the
HarvestFormDialogandHarvestFormcomponents. The conditional rendering logic and disabled states are preserved throughout.Also applies to: 551-551, 572-572, 641-641, 649-649
fdm-app/app/components/blocks/field/form.tsx (1)
8-8: LGTM! Clean spinner component migration.The import and usage have been correctly updated to use the standardized Spinner component. The loading state display remains functionally identical.
Also applies to: 134-134
fdm-app/app/components/blocks/nutrient-advice/kpi.tsx (1)
5-5: LGTM! Consistent spinner updates across all KPI cards.All three KPI card components (
NutrientKPICardForTotalApplications,NutrientKPICardForNutrientDeficit,NutrientKPICardForNutrientExcess) now use the standardized Spinner component. The loading state behavior remains unchanged.Also applies to: 50-50, 136-136, 250-250
fdm-app/app/components/blocks/fertilizer-applications/list.tsx (1)
7-7: LGTM! Spinner component correctly integrated.The delete button's loading state now displays the standardized Spinner component while maintaining the same conditional rendering behavior based on
fetcher.state.Also applies to: 159-159
fdm-app/app/routes/signin.verify.tsx (1)
18-18: LGTM! Authentication form spinner updated correctly.The verification form's submit button now uses the standardized Spinner component during the submitting state, with no changes to the authentication flow or user experience.
Also applies to: 114-114
fdm-app/app/components/custom/autocomplete.tsx (1)
15-15: LGTM! Autocomplete loading indicator standardized.The dropdown loading state now uses the standardized Spinner component with a normalized import path. The autocomplete functionality and loading behavior remain unchanged.
Also applies to: 217-217
fdm-app/app/routes/farm.$b_id_farm.settings.organic-certification.tsx (1)
25-25: LGTM! Clean component migration.The replacement of
LoadingSpinnerwith the standardizedSpinnercomponent is consistent and appropriate for both the delete and add form submission states.Also applies to: 301-301, 423-423
fdm-app/app/components/blocks/atlas/atlas-legend.tsx (1)
1-1: LGTM! Good use of explicit sizing.The migration to
Spinneris clean, and the explicitclassName="h-3 w-3"ensures the spinner is appropriately sized for the compact legend UI.Also applies to: 31-31
fdm-app/app/components/blocks/field/delete.tsx (1)
2-2: LGTM! Consistent component migration.The
Spinnerreplacement is clean and follows the established pattern for loading states in delete dialogs.Also applies to: 54-54
fdm-app/app/components/blocks/farm/delete.tsx (1)
2-2: LGTM! Consistent component migration.The
Spinnerreplacement maintains consistency with the field delete dialog and appropriately handles the loading state during farm deletion.Also applies to: 54-54
fdm-app/app/routes/signin._index.tsx (1)
43-43: LGTM! Comprehensive sign-in loading states covered.The
Spinnerreplacement is consistently applied across all three authentication methods (Microsoft, Google, and email). The loading state management properly ensures only the relevant spinner displays during each sign-in attempt.Also applies to: 399-399, 468-468, 587-587
fdm-app/app/components/blocks/atlas/atlas-panels.tsx (1)
10-10: LGTM! Consistent component migration.The Spinner component replacement is clean and maintains the same loading state behavior in the button.
Also applies to: 299-299
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.fields.$b_id._index.tsx (1)
35-35: LGTM! Consistent migration pattern.The Spinner component is properly integrated in the submit button's loading state.
Also applies to: 364-364
fdm-app/app/routes/welcome.tsx (1)
13-13: LGTM! Clean component swap.The Spinner integration in the welcome page form is consistent with the project-wide migration.
Also applies to: 223-223
fdm-app/app/routes/farm.create._index.tsx (1)
21-21: Migration from LoadingSpinner to Spinner is complete and verified.The Spinner component has been properly integrated throughout the codebase. Verification confirms:
- No remaining LoadingSpinner references
- Old loadingspinner.tsx component file has been removed
- All 32 Spinner imports are from the correct path
~/components/ui/spinner- No inconsistent spinner imports detected
fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.harvest._index.tsx (1)
38-38: Import path references non-existent component file that cannot be verified.The Spinner component is imported from
~/components/ui/spinner, but this file does not exist in the codebase. While shadcn/ui is configured and the path alias is set up in components.json, the actual component file is missing. Unable to verify:
- Accessibility features (ARIA labels, role attributes) of the Spinner component
- The claimed comparison to a "removed LoadingSpinner" (no such component exists in the repository)
- Whether the migration was actually completed
The import statement and className usage are syntactically correct, but the underlying component implementation cannot be inspected to confirm the review's claims.
fdm-app/app/routes/farm.$b_id_farm.$calendar.rotation.fertilizer._index.tsx (1)
35-35: LGTM! Clean component replacement.The import and usage updates correctly replace the custom
LoadingSpinnerwith the shadcnSpinnercomponent. TheclassNameprop is preserved, and the spinner remains contextually clear with accompanying text.Also applies to: 372-372
fdm-app/app/components/blocks/cultivation/card-details.tsx (1)
7-7: LGTM! Consistent component replacement.The migration from
LoadingSpinnertoSpinneris correctly implemented across the import and both usage locations (delete and update button loading states). The buttons remain accessible with proper labels and disabled states during submission.Also applies to: 91-91, 223-223
1 participant
Summary by CodeRabbit
Accessibility Improvements
User Interface Enhancements
Chores
✏️ Tip: You can customize this high-level summary in your review settings.