Initial approach on posterhall performance optimisation (#1358)

* Initial approach on posterhall performance optimisation

* Stylistic changes

src/components/atoms/Button/Button.tsx

@@ -7,7 +7,7 @@ import { ButtonProps } from "./Button.types";
 import * as S from "./Button.styles";
 import { Link } from "react-router-dom";
 
-const AppButton: React.FC<ButtonProps> = ({
+export const AppButton: React.FC<ButtonProps> = ({
   customClass,
   loading,
   onClick,

src/components/atoms/Button/index.ts

@@ -1 +1,5 @@
+/**
+ * @deprecated Use named export instead of default export
+ */
 export { default } from "./Button";
+export { AppButton as Button } from "./Button";

src/components/templates/PosterHall/PosterHall.scss

@@ -5,4 +5,9 @@
     flex-wrap: wrap;
     align-items: flex-start;
   }
+
+  &__more-button {
+    display: flex;
+    justify-content: center;
+  }
 }

src/components/templates/PosterHall/PosterHall.tsx

@@ -7,6 +7,8 @@ import { enterVenue } from "utils/url";
 
 import { usePosters } from "hooks/posters";
 
+import { Button } from "components/atoms/Button";
+
 import { PosterPreview } from "./components/PosterPreview";
 import { PosterHallSearch } from "./components/PosterHallSearch";
 
@@ -19,14 +21,18 @@ export interface PosterHallProps {
 export const PosterHall: React.FC<PosterHallProps> = ({ venue }) => {
   const {
     posterVenues,
+    isPostersLoaded,
+
+    increaseDisplayedPosterCount,
+
     searchInputValue,
     setSearchInputValue,
     liveFilter,
     setLiveFilter,
   } = usePosters(venue.id);
 
   const renderedPosterPreviews = useMemo(() => {
-    return posterVenues?.map((posterVenue) => (
+    return posterVenues.map((posterVenue) => (
       <PosterPreview
         key={posterVenue.id}
         posterVenue={posterVenue}
@@ -44,7 +50,17 @@ export const PosterHall: React.FC<PosterHallProps> = ({ venue }) => {
         setLiveValue={setLiveFilter}
       />
 
-      <div className="PosterHall__posters">{renderedPosterPreviews}</div>
+      <div className="PosterHall__posters">
+        {isPostersLoaded ? renderedPosterPreviews : "Loading posters"}
+      </div>
+
+      <div className="PosterHall__more-button">
+        {isPostersLoaded && (
+          <Button onClick={increaseDisplayedPosterCount}>
+            Show more posters
+          </Button>
+        )}
+      </div>
     </div>
   );
 };

src/components/templates/PosterHall/components/PosterPreview/PosterPreview.scss

@@ -8,6 +8,8 @@ $active-poster-shadows: 0 10px 20px 0 rgba($primary, 0.56);
   display: flex;
   flex-direction: column;
 
+  content-visibility: auto;
+
   height: $poster-preview-height;
   width: $poster-preview-width;
 

src/hooks/posters.ts

@@ -1,7 +1,9 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback } from "react";
 import { VenueTemplate } from "types/venues";
 import Fuse from "fuse.js";
 
+import { DEFAULT_DISPLAYED_POSTER_PREVIEW_COUNT } from "settings";
+
 import { posterVenuesSelector } from "utils/selectors";
 
 import { isLoaded, useFirestoreConnect } from "./useFirestoreConnect";
@@ -38,7 +40,7 @@ export const usePosterVenues = (posterHallId: string) => {
 };
 
 export const usePosters = (posterHallId: string) => {
-  const { posterVenues } = usePosterVenues(posterHallId);
+  const { posterVenues, isPostersLoaded } = usePosterVenues(posterHallId);
 
   const {
     searchInputValue,
@@ -47,37 +49,51 @@ export const usePosters = (posterHallId: string) => {
   } = useDebounceSearch();
 
   const [liveFilter, setLiveFilter] = useState<boolean>(false);
+  const [displayedPostersCount, setDisplayedPostersAmount] = useState(
+    DEFAULT_DISPLAYED_POSTER_PREVIEW_COUNT
+  );
+
+  const increaseDisplayedPosterCount = useCallback(() => {
+    setDisplayedPostersAmount(
+      (prevPostersNumber) =>
+        prevPostersNumber + DEFAULT_DISPLAYED_POSTER_PREVIEW_COUNT
+    );
+  }, []);
+
+  const filteredPosterVenues = useMemo(
+    () =>
+      liveFilter
+        ? posterVenues.filter((posterVenue) => posterVenue.isLive)
+        : posterVenues,
+    [posterVenues, liveFilter]
+  );
 
   const fuseVenues = useMemo(
     () =>
-      new Fuse(posterVenues, {
+      new Fuse(filteredPosterVenues, {
         keys: ["poster.title", "poster.authorName", "poster.categories"],
       }),
-    [posterVenues]
+    [filteredPosterVenues]
   );
 
   const searchedPosterVenues = useMemo(() => {
-    if (!searchQuery) return posterVenues;
+    if (!searchQuery)
+      return filteredPosterVenues.slice(0, displayedPostersCount);
 
     return fuseVenues
       .search(searchQuery)
+      .slice(0, displayedPostersCount)
       .map((fuseSearchItem) => fuseSearchItem.item);
-  }, [searchQuery, fuseVenues, posterVenues]);
-
-  const filteredPosterVenues = useMemo(
-    () =>
-      liveFilter
-        ? searchedPosterVenues.filter((posterVenue) => posterVenue.isLive)
-        : searchedPosterVenues,
-    [searchedPosterVenues, liveFilter]
-  );
+  }, [searchQuery, fuseVenues, filteredPosterVenues, displayedPostersCount]);
 
   return {
-    posterVenues: filteredPosterVenues,
+    posterVenues: searchedPosterVenues,
+    isPostersLoaded,
 
     searchInputValue,
     liveFilter,
 
+    increaseDisplayedPosterCount,
     setSearchInputValue,
     setLiveFilter,
   };

src/hooks/useDebounceSearch.ts

@@ -15,9 +15,13 @@ export const useDebounceSearch = () => {
 
   const debouncedSearch = useMemo(
     () =>
-      debounce((value: string) => {
-        setSearchQuery(value.toLowerCase());
-      }, SEARCH_DEBOUNCE_TIME),
+      debounce(
+        (value: string) => {
+          setSearchQuery(value.toLowerCase());
+        },
+        SEARCH_DEBOUNCE_TIME,
+        { maxWait: SEARCH_DEBOUNCE_TIME * 3 }
+      ),
     []
   );
 

src/settings.ts

@@ -558,3 +558,5 @@ export const ZENDESK_URL_PREFIXES = ["/admin"];
 export const POSTERPAGE_MAX_VIDEO_PARTICIPANTS = 10;
 
 export const SEARCH_DEBOUNCE_TIME = 200; // ms
+
+export const DEFAULT_DISPLAYED_POSTER_PREVIEW_COUNT = 12;