Added a skeleton loader in Encounter Actions #14973
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughEncounterCommandDialog updated to show CardListSkeleton placeholders when a search is active and query is loading. isLoading was extracted from the useQuery call and added to the memo dependency array; rendering logic for the empty state was adjusted accordingly. Changes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Pull request overview
This PR adds a loading skeleton animation to the Encounter Actions command dialog to improve user experience by providing visual feedback while questionnaire data is being fetched. The skeleton loader appears when users search within the dialog.
- Added skeleton UI component import and usage
- Extracted
isLoadingstate from the questionnaires query - Implemented conditional rendering of skeleton loaders in the
CommandEmptystate
| questionnaires, | ||
| search, | ||
| getShortcutDisplay, | ||
| isLoading, |
There was a problem hiding this comment.
The isLoading dependency is added to the useMemo dependencies array but is never used in the computation of encounterActions. This will cause unnecessary recomputation of the actions whenever loading state changes, potentially impacting performance during search operations.
| isLoading, |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/Encounter/EncounterCommandDialog.tsx
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
**/*.{ts,tsx,js,jsx}: Use path aliases@/*for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.{ts,tsx}: Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation
Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Follow established React component patterns and folder structure organized by feature and domain
src/components/**/*.{ts,tsx}: Use path aliases:@/components/,@/types/,@/lib/,@/pages/for imports
Follow import order: External packages →@/components/ui/→@/components/→@/CAREUI/→@/types/→@/lib/→ relative imports
Use named exports fromlucide-reactfor icons (e.g.,import { SettingsIcon } from "lucide-react")
ImportuseTranslationfromreact-i18nextfor internationalization
Use React 19.1.1 hooks pattern - Functional components only
Always define TypeScript Props interfaces (e.g., PatientInfoCardProps) for component props
Use handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)
Use shadcn/ui components as primary UI system (Button, Card, Badge, etc.) from@/components/ui/
Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from@/CAREUI/
UsebuttonVariantsfrom@/components/ui/buttonwith CVA patterns for button styling
Follow<Card><CardHeader>pattern for consistent card layouts
UsePatientReadtype from@/types/emr/patient/patientfor patient data handling
ImplementTagAssignmentSheetwithTagEntityTypefor patient/facility tags
UsePatientHoverCardfor patient info overlays
Use Badge components to display patient status, facility capacity, medication dosage with color variants
Usecva()from class variance authority for variant-based component styling
Usecn()from@/lib/utilsfor conditional class composition
Follow Tailwind CSS 4.1.3 color system: primary-700, gray-900, red-500 pattern with dark mode variants
Use Tailwind shadow system: shadow-sm, shadow-xs for el...
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.tsx: Use functional components with proper type definitions in React
One component per file is preferred
Prefer default exports for React components
Follow the component naming pattern:ComponentName.tsxfor React components
Use Tailwind CSS for styling
Use Shadcn UI components when available
Use local state for component-specific data
Use PascalCase for component file names (e.g.,AuthWizard.tsx)
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/components/Encounter/EncounterCommandDialog.tsx
🧠 Learnings (11)
📚 Learning: 2025-01-31T22:13:06.153Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 10345
File: src/components/Resource/ResourceDetailsUpdate.tsx:132-145
Timestamp: 2025-01-31T22:13:06.153Z
Learning: The migration from useTanStackQueryInstead to useQuery in React components requires:
1. Updating types to use UseQueryResult instead of custom hook return type
2. Replacing loading with isLoading property
3. Using queryKey array for cache management
4. Using queryFn with query utility function
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components with React Query for real-time data from medical API endpoints
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-05T19:05:40.922Z
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*{Query,Result}*.{ts,tsx} : React Query integration types should export query result types with data, isLoading, error, and refetch properties for API operations
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `tanstack/react-query` for server state management with facility data and patient records
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-23T19:05:27.239Z
Learnt from: yash-learner
Repo: ohcnetwork/care_fe PR: 14794
File: src/components/Questionnaire/QuestionTypes/ServiceRequestQuestion.tsx:465-467
Timestamp: 2025-12-23T19:05:27.239Z
Learning: In the ServiceRequestQuestion component (src/components/Questionnaire/QuestionTypes/ServiceRequestQuestion.tsx), the component always starts fresh and empty in the encounter flow and never loads with pre-existing service requests from persisted questionnaire responses. The activityDefinitionsMap state being initialized empty is appropriate for this create-only workflow.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/ShortcutContext.tsx : Implement ShortcutContext with medical workflow keyboard shortcuts for rapid clinical actions and emergency protocol shortcuts for rapid response scenarios, including accessibility shortcuts for clinical environments
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-01-13T12:24:08.854Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9927
File: src/hooks/useQuestionnaireOptions.ts:30-42
Timestamp: 2025-01-13T12:24:08.854Z
Learning: The `useQuestionnaireOptions` hook in `src/hooks/useQuestionnaireOptions.ts` is specifically designed for populating dropdown options. Performance optimizations for array operations (like avoiding spread in reduce) are unnecessary as the data size will always be within a reasonable range for dropdown usage.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2024-11-13T14:34:36.221Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9080
File: src/components/Users/UserListAndCard.tsx:333-339
Timestamp: 2024-11-13T14:34:36.221Z
Learning: In the `UserListView` component, the search input already handles cases where there are no results by displaying a no results banner, and the search box is reset when the badge is cleared.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-17T19:47:58.152Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-22T10:16:36.690Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
🧬 Code graph analysis (1)
src/components/Encounter/EncounterCommandDialog.tsx (1)
src/components/ui/command.tsx (1)
CommandEmpty(171-171)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build
- GitHub Check: Test
- GitHub Check: CodeQL-Build
🔇 Additional comments (2)
src/components/Encounter/EncounterCommandDialog.tsx (2)
11-11: LGTM! Correct import.The Skeleton component import follows the established pattern for shadcn/ui components.
71-71: LGTM! Proper React Query usage.Correctly extracts the
isLoadingstate from useQuery to drive the skeleton loader UI.
| [ | ||
| t, | ||
| questionnaireOptions, | ||
| questionnaires, | ||
| search, | ||
| getShortcutDisplay, | ||
| isLoading, | ||
| ], |
There was a problem hiding this comment.
Remove unnecessary dependency causing performance degradation.
The isLoading variable is not used anywhere in the useMemo computation (lines 143-313). Adding it to the dependency array causes unnecessary re-computation of the entire baseEncounterActions array whenever the loading state changes.
🔎 Proposed fix
[
t,
questionnaireOptions,
questionnaires,
search,
getShortcutDisplay,
- isLoading,
],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [ | |
| t, | |
| questionnaireOptions, | |
| questionnaires, | |
| search, | |
| getShortcutDisplay, | |
| isLoading, | |
| ], | |
| [ | |
| t, | |
| questionnaireOptions, | |
| questionnaires, | |
| search, | |
| getShortcutDisplay, | |
| ], |
🤖 Prompt for AI Agents
In src/components/Encounter/EncounterCommandDialog.tsx around lines 314 to 321,
the useMemo dependency array includes isLoading even though isLoading is not
referenced inside the memoized computation, causing needless re-computations;
remove isLoading from the dependency array (leave t, questionnaireOptions,
questionnaires, search, getShortcutDisplay) so baseEncounterActions only
recalculates when its actual inputs change.
| <CommandEmpty> | ||
| {isLoading && search.length > 0 ? ( | ||
| <div className="p-6 space-y-3"> | ||
| <div className="flex items-center gap-3"> | ||
| <Skeleton className="size-6 rounded" /> | ||
| <div className="space-y-1 flex-1"> | ||
| <Skeleton className="h-6 w-full" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center gap-3"> | ||
| <Skeleton className="size-6 rounded" /> | ||
| <div className="space-y-1 flex-1"> | ||
| <Skeleton className="h-6 w-full" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center gap-3"> | ||
| <Skeleton className="size-6 rounded" /> | ||
| <div className="space-y-1 flex-1"> | ||
| <Skeleton className="h-6 w-full" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| t("no_results") | ||
| )} | ||
| </CommandEmpty> |
There was a problem hiding this comment.
Add accessibility attributes for screen reader compatibility.
The skeleton loading state lacks proper ARIA attributes to inform screen reader users that content is loading. In a healthcare application requiring WCAG 2.1 AA compliance, this affects users who rely on assistive technologies.
🔎 Proposed fix to add screen reader support
<CommandEmpty>
{isLoading && search.length > 0 ? (
- <div className="p-6 space-y-3">
+ <div className="p-6 space-y-3" role="status" aria-live="polite" aria-label={t("loading_questionnaires")}>
+ <span className="sr-only">{t("loading_questionnaires")}</span>
<div className="flex items-center gap-3">
<Skeleton className="size-6 rounded" />
<div className="space-y-1 flex-1">
<Skeleton className="h-6 w-full" />
</div>
</div>
<div className="flex items-center gap-3">
<Skeleton className="size-6 rounded" />
<div className="space-y-1 flex-1">
<Skeleton className="h-6 w-full" />
</div>
</div>
<div className="flex items-center gap-3">
<Skeleton className="size-6 rounded" />
<div className="space-y-1 flex-1">
<Skeleton className="h-6 w-full" />
</div>
</div>
</div>
) : (
t("no_results")
)}
</CommandEmpty>Note: Ensure the i18n key loading_questionnaires is added to the translation files.
As per coding guidelines for accessibility compliance in medical applications.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <CommandEmpty> | |
| {isLoading && search.length > 0 ? ( | |
| <div className="p-6 space-y-3"> | |
| <div className="flex items-center gap-3"> | |
| <Skeleton className="size-6 rounded" /> | |
| <div className="space-y-1 flex-1"> | |
| <Skeleton className="h-6 w-full" /> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-3"> | |
| <Skeleton className="size-6 rounded" /> | |
| <div className="space-y-1 flex-1"> | |
| <Skeleton className="h-6 w-full" /> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-3"> | |
| <Skeleton className="size-6 rounded" /> | |
| <div className="space-y-1 flex-1"> | |
| <Skeleton className="h-6 w-full" /> | |
| </div> | |
| </div> | |
| </div> | |
| ) : ( | |
| t("no_results") | |
| )} | |
| </CommandEmpty> | |
| <CommandEmpty> | |
| {isLoading && search.length > 0 ? ( | |
| <div className="p-6 space-y-3" role="status" aria-live="polite" aria-label={t("loading_questionnaires")}> | |
| <span className="sr-only">{t("loading_questionnaires")}</span> | |
| <div className="flex items-center gap-3"> | |
| <Skeleton className="size-6 rounded" /> | |
| <div className="space-y-1 flex-1"> | |
| <Skeleton className="h-6 w-full" /> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-3"> | |
| <Skeleton className="size-6 rounded" /> | |
| <div className="space-y-1 flex-1"> | |
| <Skeleton className="h-6 w-full" /> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-3"> | |
| <Skeleton className="size-6 rounded" /> | |
| <div className="space-y-1 flex-1"> | |
| <Skeleton className="h-6 w-full" /> | |
| </div> | |
| </div> | |
| </div> | |
| ) : ( | |
| t("no_results") | |
| )} | |
| </CommandEmpty> |
🤖 Prompt for AI Agents
In src/components/Encounter/EncounterCommandDialog.tsx around lines 378 to 403,
the skeleton loading UI lacks ARIA attributes and screen-reader text; update the
loading branch to wrap the skeleton block in an element with role="status",
aria-live="polite" and aria-busy={isLoading} (or aria-busy="true" while loading)
and include a visually-hidden/text node using t("loading_questionnaires") so
screen readers announce the loading state; ensure the aria attributes are
removed or set to false when not loading and add the i18n key
loading_questionnaires to translation files.
🎭 Playwright Test ResultsStatus: ❌ Failed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4157 |
| <CommandList className="h-[80vh] max-h-[80vh] w-full"> | ||
| <CommandEmpty>{t("no_results")}</CommandEmpty> | ||
| <CommandEmpty> | ||
| {isLoading && search.length > 0 ? ( |
There was a problem hiding this comment.
I think we can use CardListSkeleton here
There was a problem hiding this comment.
@StephZam Give this a try (from SkeletonLoading.tsx).
There was a problem hiding this comment.
Yeah, it can be used but it will appear little different from loaded data
|
@nihal467 This looks fine to me |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/components/Encounter/EncounterCommandDialog.tsx (2)
314-321: RemoveisLoadingfrom the dependency array to prevent unnecessary re-computation.The
isLoadingvariable is not used anywhere within theuseMemocomputation (lines 143-313). Including it in the dependency array causes the entirebaseEncounterActionsarray to be recalculated every time the loading state changes, impacting performance during search operations.🔎 Proposed fix
[ t, questionnaireOptions, questionnaires, search, getShortcutDisplay, - isLoading, ],This issue was previously identified by other reviewers in the past review comments.
378-386: Add accessibility attributes for screen reader compatibility in the loading state.The skeleton loading state lacks proper ARIA attributes to inform screen reader users that content is loading. In a healthcare application requiring WCAG 2.1 AA compliance, this prevents users relying on assistive technologies from understanding the loading state.
🔎 Proposed fix to add screen reader support
<CommandEmpty> {isLoading && search.length > 0 ? ( - <div className="space-y-2"> + <div className="space-y-2" role="status" aria-live="polite" aria-busy="true"> + <span className="sr-only">{t("loading_questionnaires")}</span> <CardListSkeleton count={3} /> </div> ) : ( t("no_results") )} </CommandEmpty>Note: Ensure the i18n key
loading_questionnairesis added to the translation files with appropriate text such as "Loading questionnaires..." or "Searching...".As per coding guidelines for WCAG 2.1 AA accessibility compliance in medical applications. This issue was previously identified in past review comments.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/Encounter/EncounterCommandDialog.tsx
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
**/*.{ts,tsx,js,jsx}: Use path aliases@/*for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.{ts,tsx}: Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation
Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Follow established React component patterns and folder structure organized by feature and domain
src/components/**/*.{ts,tsx}: Use path aliases:@/components/,@/types/,@/lib/,@/pages/for imports
Follow import order: External packages →@/components/ui/→@/components/→@/CAREUI/→@/types/→@/lib/→ relative imports
Use named exports fromlucide-reactfor icons (e.g.,import { SettingsIcon } from "lucide-react")
ImportuseTranslationfromreact-i18nextfor internationalization
Use React 19.1.1 hooks pattern - Functional components only
Always define TypeScript Props interfaces (e.g., PatientInfoCardProps) for component props
Use handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)
Use shadcn/ui components as primary UI system (Button, Card, Badge, etc.) from@/components/ui/
Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from@/CAREUI/
UsebuttonVariantsfrom@/components/ui/buttonwith CVA patterns for button styling
Follow<Card><CardHeader>pattern for consistent card layouts
UsePatientReadtype from@/types/emr/patient/patientfor patient data handling
ImplementTagAssignmentSheetwithTagEntityTypefor patient/facility tags
UsePatientHoverCardfor patient info overlays
Use Badge components to display patient status, facility capacity, medication dosage with color variants
Usecva()from class variance authority for variant-based component styling
Usecn()from@/lib/utilsfor conditional class composition
Follow Tailwind CSS 4.1.3 color system: primary-700, gray-900, red-500 pattern with dark mode variants
Use Tailwind shadow system: shadow-sm, shadow-xs for el...
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces
Files:
src/components/Encounter/EncounterCommandDialog.tsx
src/**/*.{tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.tsx: Use functional components with proper type definitions in React
One component per file is preferred
Prefer default exports for React components
Follow the component naming pattern:ComponentName.tsxfor React components
Use Tailwind CSS for styling
Use Shadcn UI components when available
Use local state for component-specific data
Use PascalCase for component file names (e.g.,AuthWizard.tsx)
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
src/components/Encounter/EncounterCommandDialog.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/components/Encounter/EncounterCommandDialog.tsx
🧠 Learnings (32)
📓 Common learnings
Learnt from: shivankacker
Repo: ohcnetwork/care_fe PR: 11403
File: src/components/Questionnaire/ValueSetSelect.tsx:278-308
Timestamp: 2025-03-19T10:14:20.559Z
Learning: TanStack Query v5 (previously known as React Query) uses `isPending` instead of `isLoading` for mutation states in the useMutation hook. The usage of `isPending` in the codebase is correct and follows the current API.
Learnt from: shivankacker
Repo: ohcnetwork/care_fe PR: 11403
File: src/components/Questionnaire/ValueSetSelect.tsx:278-308
Timestamp: 2025-03-19T10:14:20.559Z
Learning: TanStack Query v5 (previously known as React Query) uses `isPending` instead of `isLoading` for mutation states in the useMutation hook. The usage of `isPending` in the codebase is correct and follows the current API.
📚 Learning: 2025-01-31T22:13:06.153Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 10345
File: src/components/Resource/ResourceDetailsUpdate.tsx:132-145
Timestamp: 2025-01-31T22:13:06.153Z
Learning: The migration from useTanStackQueryInstead to useQuery in React components requires:
1. Updating types to use UseQueryResult instead of custom hook return type
2. Replacing loading with isLoading property
3. Using queryKey array for cache management
4. Using queryFn with query utility function
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Integrate CAREUI components with React Query for real-time data from medical API endpoints
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `tanstack/react-query` for server state management with facility data and patient records
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientHoverCard` for patient info overlays
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*{Query,Result}*.{ts,tsx} : React Query integration types should export query result types with data, isLoading, error, and refetch properties for API operations
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-03-19T10:14:20.559Z
Learnt from: shivankacker
Repo: ohcnetwork/care_fe PR: 11403
File: src/components/Questionnaire/ValueSetSelect.tsx:278-308
Timestamp: 2025-03-19T10:14:20.559Z
Learning: TanStack Query v5 (previously known as React Query) uses `isPending` instead of `isLoading` for mutation states in the useMutation hook. The usage of `isPending` in the codebase is correct and follows the current API.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2024-12-05T22:14:56.699Z
Learnt from: UdaySagar-Git
Repo: ohcnetwork/care_fe PR: 9298
File: src/components/Common/DiscussionNotesEditor.tsx:113-131
Timestamp: 2024-12-05T22:14:56.699Z
Learning: In `src/components/Common/DiscussionNotesEditor.tsx`, the `DiscussionNotesEditor` component fetches all users at once and does not fetch users by text filter; therefore, adding debounce to mention filtering is not beneficial.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2024-11-13T11:33:22.403Z
Learnt from: sainak
Repo: ohcnetwork/care_fe PR: 9079
File: src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx:93-117
Timestamp: 2024-11-13T11:33:22.403Z
Learning: In `src/components/Facility/ConsultationDetails/ConsultationNursingTab.tsx`, the parent component manages the loading state, so child components like `NursingPlot` should not implement their own loading indicators.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-05T19:05:40.922Z
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:49:43.065Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T13:49:43.065Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-08-10T10:20:32.921Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13316
File: src/pages/Facility/settings/productKnowledge/ProductKnowledgeView.tsx:63-65
Timestamp: 2025-08-10T10:20:32.921Z
Learning: In the ProductKnowledgeView component at src/pages/Facility/settings/productKnowledge/ProductKnowledgeView.tsx, the loading state should return only the Loading component without wrapping it in a Page shell. This is the expected behavior to provide a cleaner loading experience without maintaining the page layout during data fetching.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-23T19:05:27.239Z
Learnt from: yash-learner
Repo: ohcnetwork/care_fe PR: 14794
File: src/components/Questionnaire/QuestionTypes/ServiceRequestQuestion.tsx:465-467
Timestamp: 2025-12-23T19:05:27.239Z
Learning: In the ServiceRequestQuestion component (src/components/Questionnaire/QuestionTypes/ServiceRequestQuestion.tsx), the component always starts fresh and empty in the encounter flow and never loads with pre-existing service requests from persisted questionnaire responses. The activityDefinitionsMap state being initialized empty is appropriate for this create-only workflow.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-01-13T12:24:08.854Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9927
File: src/hooks/useQuestionnaireOptions.ts:30-42
Timestamp: 2025-01-13T12:24:08.854Z
Learning: The `useQuestionnaireOptions` hook in `src/hooks/useQuestionnaireOptions.ts` is specifically designed for populating dropdown options. Performance optimizations for array operations (like avoiding spread in reduce) are unnecessary as the data size will always be within a reasonable range for dropdown usage.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2024-11-25T09:21:37.265Z
Learnt from: sarvesh-official
Repo: ohcnetwork/care_fe PR: 9196
File: src/hooks/useFileManager.tsx:76-76
Timestamp: 2024-11-25T09:21:37.265Z
Learning: In the React TypeScript file `src/hooks/useFileManager.tsx`, resetting `currentIndex` in a `useEffect` when `uploadedFiles` changes will reset the current index every time and can cause uncontrolled issues. It's better to manage `currentIndex` without automatically resetting it upon `uploadedFiles` changes to avoid unexpected behavior.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgency
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/components/**/*.{ts,tsx} : Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:54:35.875Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Implement proper ARIA attributes for accessibility
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use proper ARIA labels and roles in page components
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Ensure keyboard navigation is supported for clinical workflows and emergency situations
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Provide clear and visible focus indicators for complex medical workflows in CAREUI components
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Support full keyboard navigation for hands-free operation in clinical settings
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:54:35.875Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Follow the component documentation for proper usage
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Implement proper loading, error, and success states for data fetching
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:53:57.496Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/01-project-structure.mdc:0-0
Timestamp: 2025-11-25T13:53:57.496Z
Learning: Applies to src/index.tsx : Application bootstrap should be implemented in src/index.tsx
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Implement loading, error, and success states for async operations
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Applies to src/pages/**/*.{ts,tsx} : Use lazy loading for heavy components within page components
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-17T19:47:58.152Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
📚 Learning: 2025-12-22T10:16:36.690Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.
Applied to files:
src/components/Encounter/EncounterCommandDialog.tsx
🧬 Code graph analysis (1)
src/components/Encounter/EncounterCommandDialog.tsx (2)
src/components/ui/command.tsx (1)
CommandEmpty(171-171)src/components/Common/SkeletonLoading.tsx (1)
CardListSkeleton(59-72)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build
- GitHub Check: Test
- GitHub Check: CodeQL-Build
6 participants
Proposed Changes
Fixes #14968
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.