Improve discover performance (responsible-ai-collaborative#2402)

* Reduce test flake * Conditionally render controls based on window size * Debounce resize * Add virtual filters to prevent refinements from getting removed from state * Reduce flake
lmcnulty · Nov 10, 2023 · 20f6e64 · 20f6e64
1 parent 30a839b
commit 20f6e64
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 34 deletions.
diff --git a/site/gatsby-site/src/components/discover/Controls.js b/site/gatsby-site/src/components/discover/Controls.js
@@ -27,7 +27,7 @@ const Controls = () => {
 
   return (
     <>
-      <div className="justify-between gap-2 mt-4 hidden md:flex flex-wrap items-center">
+      <div className="justify-between gap-2 mt-4 flex flex-wrap items-center">
         <div className="flex gap-4 items-center flex-wrap">
           <div className="flex items-center">
             <Stats />

diff --git a/site/gatsby-site/src/components/discover/Discover.js b/site/gatsby-site/src/components/discover/Discover.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Col from 'elements/Col';
 import Row from 'elements/Row';
 import Container from 'elements/Container';
@@ -16,6 +16,7 @@ import parseURL from './parseURL';
 import { queryConfig } from './queryParams';
 import { history } from 'instantsearch.js/es/lib/routers';
 import Pagination from './Pagination';
+import debounce from 'lodash/debounce';
 
 const searchClient = algoliasearch(
   config.header.search.algoliaAppId,
@@ -34,6 +35,28 @@ export default function Discover() {
 
   const [indexName] = useState(`instant_search-${locale}-featured`);
 
+  const [width, setWidth] = useState(0);
+
+  const handleWindowSizeChange = useRef(
+    debounce(() => {
+      setWidth(window.innerWidth);
+    }, 1000)
+  ).current;
+
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowSizeChange);
+
+    handleWindowSizeChange();
+
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+  }, []);
+
+  if (width == 0) {
+    return null;
+  }
+
   return (
     <InstantSearch
       searchClient={searchClient}
@@ -62,9 +85,7 @@ export default function Discover() {
           </Col>
         </Row>
 
-        <Controls />
-
-        <OptionsModal />
+        {width > 767 ? <Controls /> : <OptionsModal />}
 
         <Hits />
 

diff --git a/site/gatsby-site/src/components/discover/OptionsModal.js b/site/gatsby-site/src/components/discover/OptionsModal.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import REFINEMENT_LISTS from 'components/discover/REFINEMENT_LISTS';
 import { AccordionFilter } from './Filter';
 import Stats from './Stats';
@@ -8,16 +8,42 @@ import DisplayModeSwitch from './DisplayModeSwitch';
 import Button from 'elements/Button';
 import DisplayOptions from './DisplayOptions';
 import { Accordion, Modal } from 'flowbite-react';
+import { useRange, useRefinementList } from 'react-instantsearch';
+
+const VirtualRefinementList = ({ attribute }) => {
+  useRefinementList({ attribute });
+
+  return null;
+};
+
+const VirtualRange = ({ attribute }) => {
+  useRange({ attribute });
+
+  return null;
+};
+
+const componentsMap = {
+  refinement: VirtualRefinementList,
+  range: VirtualRange,
+};
+
+function VirtualFilters() {
+  return (
+    <>
+      {REFINEMENT_LISTS.map((list) => {
+        const Component = componentsMap[list.type];
+
+        return <Component key={list.attribute} attribute={list.attribute} />;
+      })}
+    </>
+  );
+}
 
 function OptionsModal() {
   const [showModal, setShowModal] = useState(false);
 
   const handleClose = () => setShowModal(false);
 
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
   return (
     <div>
       <div className="my-4 md:hidden flex justify-between">
@@ -33,31 +59,32 @@ function OptionsModal() {
           </Button>
         </div>
       </div>
-      {mounted && (
-        <Modal show={showModal} onClose={handleClose}>
-          <Modal.Header>
-            <Trans>Search Options</Trans>
-          </Modal.Header>
-          <Modal.Body>
-            <div>
-              <div className="tw-options-modal-hbox">
-                <DisplayOptions />
-                <DisplayModeSwitch />
-              </div>
-              <Accordion>
-                {REFINEMENT_LISTS.map((list) => (
-                  <AccordionFilter key={list.attribute} attribute={list.attribute} {...list} />
-                ))}
-              </Accordion>
+
+      <VirtualFilters />
+
+      <Modal show={showModal} onClose={handleClose}>
+        <Modal.Header>
+          <Trans>Search Options</Trans>
+        </Modal.Header>
+        <Modal.Body>
+          <div>
+            <div className="tw-options-modal-hbox">
+              <DisplayOptions />
+              <DisplayModeSwitch />
             </div>
-          </Modal.Body>
-          <Modal.Footer>
-            <Button variant="secondary" onClick={handleClose}>
-              <Trans>Close</Trans>
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      )}
+            <Accordion>
+              {REFINEMENT_LISTS.map((list) => (
+                <AccordionFilter key={list.attribute} attribute={list.attribute} {...list} />
+              ))}
+            </Accordion>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            <Trans>Close</Trans>
+          </Button>
+        </Modal.Footer>
+      </Modal>
     </div>
   );
 }