fix: Collection search loading text on secondary searches [PT-188117039]

rails/react-components/src/library/components/collections.tsx

@@ -7,32 +7,19 @@ import css from "./collections.scss";
 interface Props {
   collections: any[]
   numTotalCollections: number;
-}
-
-interface State {
-  showAll: boolean;
+  searching: boolean;
+  showAllCollections: boolean;
+  enableShowAllCollections: () => void;
 }
 
 const initialDisplayCount = 2;
 
-export default class Collections extends React.Component<Props, State> {
-  constructor (props: Props) {
-    super(props);
-
-    this.state = {
-      showAll: false
-    };
-  }
-
-  handleShowMore = () => {
-    this.setState({showAll: true});
-  };
+export default class Collections extends React.Component<Props> {
 
   render () {
-    const { showAll } = this.state;
-    const { collections, numTotalCollections } = this.props;
-    const displayCount = showAll ? numTotalCollections : initialDisplayCount;
-    const showingAll = showAll || displayCount >= numTotalCollections;
+    const { collections, numTotalCollections, searching, showAllCollections, enableShowAllCollections } = this.props;
+    const displayCount = showAllCollections ? numTotalCollections : initialDisplayCount;
+    const showingAll = showAllCollections || displayCount >= numTotalCollections;
     const collectionCount = showingAll ? numTotalCollections : displayCount + " of " + numTotalCollections;
     const displayCollections = collections.slice(0, displayCount);
 
@@ -42,16 +29,18 @@ export default class Collections extends React.Component<Props, State> {
           <h2>Collections</h2>
           <div className={css.finderResultsCollectionsCount}>
             <div>
-              Showing <strong>{ collectionCount + " " + pluralize(collectionCount, "Collection", "Collections") }</strong> matching your search
+              {searching ? "Loading..." : <>Showing <strong>{ collectionCount + " " + pluralize(collectionCount, "Collection", "Collections") }</strong> matching your search</>}
             </div>
           </div>
         </div>
+        {!searching &&
         <div className={css.finderResultsContainer}>
           { displayCollections.map((collection: any, index: any) => {
             return <StemFinderResult key={`${collection.external_url}-${index}`} resource={collection} index={index} opacity={1} />;
           }) }
         </div>
-        {!showingAll && <div className={css.findResultsCollectionsShowMore}><button onClick={this.handleShowMore}>Show More</button></div>}
+        }
+        {!searching && !showingAll && <div className={css.findResultsCollectionsShowMore}><button onClick={() => enableShowAllCollections()}>Show More</button></div>}
       </div>
     );
   }

rails/react-components/src/library/components/stem-finder.tsx

@@ -63,7 +63,8 @@ interface State {
   sortOrder: string,
   subjectAreasSelected: SubjectArea[],
   subjectAreasSelectedMap: Record<string, SubjectArea|undefined>,
-  usersAuthoredResourcesCount: number
+  usersAuthoredResourcesCount: number,
+  showAllCollections: boolean,
 }
 
 class StemFinder extends React.Component<Props, State> {
@@ -150,7 +151,8 @@ class StemFinder extends React.Component<Props, State> {
       sortOrder,
       subjectAreasSelected,
       subjectAreasSelectedMap,
-      usersAuthoredResourcesCount: 0
+      usersAuthoredResourcesCount: 0,
+      showAllCollections: false,
     };
   }
 
@@ -296,7 +298,7 @@ class StemFinder extends React.Component<Props, State> {
     let resources = incremental ? this.state.resources.slice(0) : [];
     const searchPage = incremental ? this.state.searchPage + 1 : 1;
     const keyword = jQuery.trim(this.state.searchInput);
-    const collections: any[] = [];
+    const collections = incremental ? this.state.collections.slice(0) : [];
     /* eslint-enable react/no-access-state-in-setstate */
 
     // short circuit further incremental searches when all data has been downloaded
@@ -338,7 +340,6 @@ class StemFinder extends React.Component<Props, State> {
           portalObjectHelpers.processResource(material);
           if (material.material_type === "Collection") {
             featuredCollections.push(material);
-            // only set collections on initial search
             if (!incremental) {
               collections.push(material);
             }
@@ -591,14 +592,16 @@ class StemFinder extends React.Component<Props, State> {
     this.scrollToFinder();
     this.setState({
       hideFeatured: true,
-      initPage: false
+      initPage: false,
+      showAllCollections: false,
     });
   };
 
   handleAutoSuggestSubmit = (searchInput: any) => {
     this.setState({
       hideFeatured: true,
-      initPage: false
+      initPage: false,
+      showAllCollections: false,
     });
     this.setState({ searchInput }, () => {
       this.search();
@@ -768,13 +771,15 @@ class StemFinder extends React.Component<Props, State> {
     }, 500);
   }
 
+  handleShowAllCollections = () => {
+    this.setState({ showAllCollections: true });
+  };
+
   renderCollections () {
-    const { collections, searchInput, numTotalCollections, initPage, hideFeatured, keyword } = this.state;
-    const validSearchInput = keyword.length > 0 && (searchInput.trim() === keyword);
-    const showCollections = !initPage && (validSearchInput || !this.noOptionsSelected()) && collections.length > 0;
+    const { collections, numTotalCollections, initPage, hideFeatured, searching, showAllCollections } = this.state;
 
-    if (showCollections) {
-      return <Collections collections={collections} numTotalCollections={numTotalCollections} />;
+    if (!initPage) {
+      return <Collections collections={collections} numTotalCollections={numTotalCollections} searching={searching} showAllCollections={showAllCollections} enableShowAllCollections={this.handleShowAllCollections} />;
     }
 
     let featuredCollections = this.state.featuredCollections;