UIEH-1428 Memoize TitleSearchFilters component to remove unnecessary renders

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Agreements accordion - Revise Are you sure you want to unassign agreement? message. (UIEH-1420)
 * Agreements accordion - Add a tooltip for the `New` and `Add` buttons. (UIEH-1424)
 * eHoldings package-title (resource) view: display Proxied URL. (UIEH-1419)
+* Fix title search is slow with many Packages filter options. (UIEH-1428)
 
 ## [9.1.1] (https://github.com/folio-org/ui-eholdings/tree/v9.1.1) (2024-03-24)
 

src/components/search-form/components/packages-filter/packages-filter.js

@@ -12,22 +12,24 @@ import PackagesFilterAccordion from '../packages-filter-accordion';
 const propTypes = {
   activeFilters: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
+  isPackagesLoading: PropTypes.bool.isRequired,
+  isResultsLoading: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
-  packagesFacetCollection: PropTypes.object.isRequired,
   params: PropTypes.object.isRequired,
   prevDataOfOptedPackage: PropTypes.object.isRequired,
-  results: PropTypes.object.isRequired,
+  resultsLength: PropTypes.number.isRequired,
   titlesFacets: PropTypes.object.isRequired,
 };
 
 const PackagesFilter = ({
   activeFilters,
   disabled,
   params,
-  packagesFacetCollection,
+  isPackagesLoading,
   titlesFacets,
   prevDataOfOptedPackage,
-  results,
+  resultsLength,
+  isResultsLoading,
   onUpdate,
 }) => {
   const initialTitlesPackages = useRef(titlesFacets.packages).current;
@@ -65,8 +67,8 @@ const PackagesFilter = ({
   const areStalePackages = (initialTitlesPackages === titlesFacets.packages)
     && isEqual(prevActiveFilters.current, activeFilters);
 
-  const noResults = params.q && !results.length && !results.isLoading;
-  const isFirstResultsLoading = !activeFilters.packageIds && results.isLoading && !results.length;
+  const noResults = params.q && !resultsLength && !isResultsLoading;
+  const isFirstResultsLoading = !activeFilters.packageIds && isResultsLoading && !resultsLength;
 
   if (!params.q || (noResults && !activeFilters.packageIds)) {
     return null;
@@ -83,7 +85,7 @@ const PackagesFilter = ({
       activeFilters={activeFilters}
       dataOptions={dataOptions}
       disabled={disabled}
-      isLoading={results.isLoading || packagesFacetCollection.isLoading}
+      isLoading={isResultsLoading || isPackagesLoading}
       onUpdate={onUpdate}
     />
   );

src/components/search-form/components/packages-filter/packages-filter.test.js

@@ -23,8 +23,9 @@ const getComponent = (props = {}) => (
     params={{ q: 'book' }}
     titlesFacets={{}}
     prevDataOfOptedPackage={{}}
-    packagesFacetCollection={{}}
-    results={{}}
+    isPackagesLoading={false}
+    resultsLength={0}
+    isResultsLoading={false}
     onUpdate={() => {}}
     {...props}
   />
@@ -42,7 +43,6 @@ describe('Given PackagesFilter', () => {
       const { container } = renderComponent({
         params: { q: 'book' },
         activeFilters: { packageIds: '' },
-        results: { length: 0, isLoading: false },
       });
 
       expect(container).toBeEmptyDOMElement();
@@ -64,7 +64,7 @@ describe('Given PackagesFilter', () => {
       const { getByTestId } = renderComponent({
         params: { q: 'book' },
         activeFilters: { packageIds: '' },
-        results: { length: 0, isLoading: true },
+        isResultsLoading: true,
       });
 
       expect(getByTestId('spinner-ellipsis')).toBeDefined();

src/components/search-form/search-form.js

@@ -377,9 +377,10 @@ class SearchForm extends Component {
                 activeFilters={combinedFilters}
                 params={params}
                 prevDataOfOptedPackage={prevDataOfOptedPackage}
-                results={results}
+                resultsLength={results.length}
+                isResultsLoading={results.isLoading}
                 titlesFacets={titlesFacets}
-                packagesFacetCollection={packagesFacetCollection}
+                isPackagesLoading={packagesFacetCollection.isLoading}
                 onUpdate={this.handleUpdateFilter}
                 disabled={standaloneFiltersEnabled}
               />

src/components/title-search-filters.js

@@ -1,4 +1,7 @@
+import { memo } from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+
 import SearchFilters from './search-form/search-filters';
 import PackagesFilter from './search-form/components/packages-filter';
 import {
@@ -10,11 +13,12 @@ import {
 const propTypes = {
   activeFilters: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
+  isPackagesLoading: PropTypes.bool.isRequired,
+  isResultsLoading: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
-  packagesFacetCollection: PropTypes.object.isRequired,
   params: PropTypes.object.isRequired,
   prevDataOfOptedPackage: PropTypes.object.isRequired,
-  results: PropTypes.object.isRequired,
+  resultsLength: PropTypes.number.isRequired,
   titlesFacets: PropTypes.object.isRequired,
 };
 
@@ -32,8 +36,9 @@ function TitleSearchFilters(props) {
     disabled,
     params,
     prevDataOfOptedPackage,
-    results,
-    packagesFacetCollection,
+    resultsLength,
+    isResultsLoading,
+    isPackagesLoading,
     titlesFacets,
     onUpdate,
   } = props;
@@ -54,9 +59,10 @@ function TitleSearchFilters(props) {
         disabled={disabled}
         params={params}
         prevDataOfOptedPackage={prevDataOfOptedPackage}
-        results={results}
+        resultsLength={resultsLength}
+        isResultsLoading={isResultsLoading}
         titlesFacets={titlesFacets}
-        packagesFacetCollection={packagesFacetCollection}
+        isPackagesLoading={isPackagesLoading}
         onUpdate={onUpdate}
       />
     </>
@@ -65,4 +71,4 @@ function TitleSearchFilters(props) {
 
 TitleSearchFilters.propTypes = propTypes;
 
-export default TitleSearchFilters;
+export default memo(TitleSearchFilters, isEqual);