(fix) O3-2877: Make the drug search debounce delay value configurable (…

…#1680)

Co-authored-by: jwnasambu <wamalwa1844.com>

packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx

@@ -1,10 +1,11 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, Search } from '@carbon/react';
-import { useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { type DrugOrderBasketItem } from '../../types';
 import OrderBasketSearchResults from './order-basket-search-results.component';
 import styles from './order-basket-search.scss';
+import { type ConfigObject } from '../../config-schema';
 
 export interface DrugSearchProps {
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
@@ -14,7 +15,8 @@ export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { debounceDelayInMs } = useConfig<ConfigObject>();
+  const debouncedSearchTerm = useDebounce(searchTerm, debounceDelayInMs ?? 300);
   const searchInputRef = useRef(null);
 
   const focusAndClearSearchInput = () => {

packages/esm-patient-medications-app/src/config-schema.ts

@@ -30,6 +30,12 @@ export const configSchema = {
     _default: 99,
     _description: 'The maximum number of days for medication dispensing.',
   },
+  debounceDelayInMs: {
+    _type: Type.Number,
+    _description:
+      'Number of milliseconds to delay the search operation in the drug search input by after the user starts typing. The useDebounce hook delays the search by 300ms by default',
+    _default: 300,
+  },
 };
 
 export interface ConfigObject {
@@ -40,4 +46,5 @@ export interface ConfigObject {
   drugOrderTypeUUID: string;
   showPrintButton: boolean;
   maxDispenseDurationInDays: number;
+  debounceDelayInMs: number;
 }