From 298f3d4e19aedbf364bdf8e5a956647b30ae2ee5 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:52:56 +1100
Subject: [PATCH] Lazy load images (#4228)

* Add lazy loading for many images
* Load sprites on first hover of scrubber
---
 .../src/components/Galleries/GalleryCard.tsx  |  2 ++
 .../src/components/Galleries/GalleryList.tsx  |  1 +
 .../components/Galleries/GalleryWallCard.tsx  |  2 +-
 ui/v2.5/src/components/Movies/MovieCard.tsx   |  1 +
 .../components/Performers/PerformerCard.tsx   |  1 +
 .../Performers/PerformerListTable.tsx         |  1 +
 .../src/components/Scenes/PreviewScrubber.tsx | 30 +++++++++++++++----
 ui/v2.5/src/components/Scenes/SceneCard.tsx   | 14 +++++++--
 .../Scenes/SceneDetails/QueueViewer.tsx       |  6 +++-
 .../src/components/Scenes/SceneListTable.tsx  |  1 +
 ui/v2.5/src/components/Scenes/styles.scss     | 10 +++++++
 ui/v2.5/src/components/Shared/GridCard.tsx    |  1 +
 ui/v2.5/src/components/Studios/StudioCard.tsx |  1 +
 .../components/Tagger/scenes/TaggerScene.tsx  |  1 +
 .../Tagger/studios/StashSearchResult.tsx      |  7 ++++-
 .../Tagger/studios/StudioTagger.tsx           |  2 +-
 ui/v2.5/src/components/Tags/TagCard.tsx       |  1 +
 ui/v2.5/src/components/Wall/WallItem.tsx      |  1 +
 18 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
index c62b5b783..82ec1acc9 100644
--- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
@@ -99,6 +99,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
           ) : (
             <img
               className="image-thumbnail"
+              loading="lazy"
               alt={props.gallery.studio.name}
               src={props.gallery.studio.image_path ?? ""}
             />
@@ -153,6 +154,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
         <>
           {props.gallery.cover ? (
             <img
+              loading="lazy"
               className="gallery-card-image"
               alt={props.gallery.title ?? ""}
               src={`${props.gallery.cover.paths.thumbnail}`}
diff --git a/ui/v2.5/src/components/Galleries/GalleryList.tsx b/ui/v2.5/src/components/Galleries/GalleryList.tsx
index a8f46cf20..e332244ad 100644
--- a/ui/v2.5/src/components/Galleries/GalleryList.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryList.tsx
@@ -168,6 +168,7 @@ export const GalleryList: React.FC<IGalleryList> = ({
                     <Link to={`/galleries/${gallery.id}`}>
                       {gallery.cover ? (
                         <img
+                          loading="lazy"
                           alt={gallery.title ?? ""}
                           className="w-100 w-sm-auto"
                           src={`${gallery.cover.paths.thumbnail}`}
diff --git a/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx b/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx
index d103938ce..f79fe02a1 100644
--- a/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx
@@ -51,7 +51,7 @@ const GalleryWallCard: React.FC<IProps> = ({ gallery }) => {
         tabIndex={0}
       >
         <RatingSystem value={gallery.rating100 ?? undefined} disabled />
-        <img src={cover} alt="" className={CLASSNAME_IMG} />
+        <img loading="lazy" src={cover} alt="" className={CLASSNAME_IMG} />
         <footer className={CLASSNAME_FOOTER}>
           <Link
             to={`/galleries/${gallery.id}`}
diff --git a/ui/v2.5/src/components/Movies/MovieCard.tsx b/ui/v2.5/src/components/Movies/MovieCard.tsx
index 206b0a8ca..e86856f2e 100644
--- a/ui/v2.5/src/components/Movies/MovieCard.tsx
+++ b/ui/v2.5/src/components/Movies/MovieCard.tsx
@@ -76,6 +76,7 @@ export const MovieCard: React.FC<IProps> = (props: IProps) => {
       image={
         <>
           <img
+            loading="lazy"
             className="movie-card-image"
             alt={props.movie.name ?? ""}
             src={props.movie.front_image_path ?? ""}
diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
index fab6acad8..0cdc2203a 100644
--- a/ui/v2.5/src/components/Performers/PerformerCard.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -266,6 +266,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
       image={
         <>
           <img
+            loading="lazy"
             className="performer-card-image"
             alt={performer.name ?? ""}
             src={performer.image_path ?? ""}
diff --git a/ui/v2.5/src/components/Performers/PerformerListTable.tsx b/ui/v2.5/src/components/Performers/PerformerListTable.tsx
index cc0bdc2a5..7b9e76154 100644
--- a/ui/v2.5/src/components/Performers/PerformerListTable.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerListTable.tsx
@@ -56,6 +56,7 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
       <td>
         <Link to={`/performers/${performer.id}`}>
           <img
+            loading="lazy"
             className="image-thumbnail"
             alt={performer.name ?? ""}
             src={performer.image_path ?? ""}
diff --git a/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx b/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx
index 3155f2009..aec85eda6 100644
--- a/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx
+++ b/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx
@@ -1,7 +1,14 @@
-import React, { useRef, useMemo, useState, useLayoutEffect } from "react";
+import React, {
+  useRef,
+  useMemo,
+  useState,
+  useLayoutEffect,
+  useEffect,
+} from "react";
 import { useSpriteInfo } from "src/hooks/sprite";
 import { useThrottle } from "src/hooks/throttle";
 import TextUtils from "src/utils/text";
+import cx from "classnames";
 
 interface IHoverScrubber {
   totalSprites: number;
@@ -62,7 +69,11 @@ const HoverScrubber: React.FC<IHoverScrubber> = ({
   }, [activeIndex, totalSprites]);
 
   return (
-    <div className="hover-scrubber">
+    <div
+      className={cx("hover-scrubber", {
+        "hover-scrubber-inactive": !totalSprites,
+      })}
+    >
       <div
         className="hover-scrubber-area"
         onMouseMove={onMouseMove}
@@ -109,7 +120,9 @@ export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
 
   const debounceSetActiveIndex = useThrottle(setActiveIndex, 50);
 
-  const spriteInfo = useSpriteInfo(vttPath);
+  // hold off on loading vtt until first mouse over
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const spriteInfo = useSpriteInfo(hasLoaded ? vttPath : undefined);
 
   const sprite = useMemo(() => {
     if (!spriteInfo || activeIndex === undefined) {
@@ -118,6 +131,13 @@ export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
     return spriteInfo[activeIndex];
   }, [activeIndex, spriteInfo]);
 
+  // mark as loaded on the first hover
+  useEffect(() => {
+    if (activeIndex !== undefined) {
+      setHasLoaded(true);
+    }
+  }, [activeIndex]);
+
   useLayoutEffect(() => {
     const imageParent = imageParentRef.current;
 
@@ -153,7 +173,7 @@ export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
     onClick(sprite.start);
   }
 
-  if (!spriteInfo) return null;
+  if (!spriteInfo && hasLoaded) return null;
 
   return (
     <div className="preview-scrubber">
@@ -166,7 +186,7 @@ export const PreviewScrubber: React.FC<IScenePreviewProps> = ({
         </div>
       )}
       <HoverScrubber
-        totalSprites={spriteInfo.length}
+        totalSprites={spriteInfo?.length ?? 0}
         activeIndex={activeIndex}
         setActiveIndex={(i) => debounceSetActiveIndex(i)}
         onClick={onScrubberClick}
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index 0672ae4a6..44b8474ce 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -71,7 +71,12 @@ export const ScenePreview: React.FC<IScenePreviewProps> = ({
 
   return (
     <div className={cx("scene-card-preview", { portrait: isPortrait })}>
-      <img className="scene-card-preview-image" src={image} alt="" />
+      <img
+        className="scene-card-preview-image"
+        loading="lazy"
+        src={image}
+        alt=""
+      />
       <video
         disableRemotePlayback
         playsInline
@@ -166,7 +171,12 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     }
 
     return (
-      <img className="image-thumbnail" alt={studioName} src={studioImage} />
+      <img
+        className="image-thumbnail"
+        loading="lazy"
+        alt={studioName}
+        src={studioImage}
+      />
     );
   }
 
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
index 1f4b8f740..70d135ef0 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
@@ -88,7 +88,11 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
         >
           <div className="ml-1 d-flex align-items-center">
             <div className="thumbnail-container">
-              <img alt={scene.title ?? ""} src={scene.paths.screenshot ?? ""} />
+              <img
+                loading="lazy"
+                alt={scene.title ?? ""}
+                src={scene.paths.screenshot ?? ""}
+              />
             </div>
             <div>
               <span className="align-middle text-break">
diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
index 874d0893f..d0c278f42 100644
--- a/ui/v2.5/src/components/Scenes/SceneListTable.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
@@ -87,6 +87,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
         <td>
           <Link to={sceneLink}>
             <img
+              loading="lazy"
               className="image-thumbnail"
               alt={title}
               src={scene.paths.screenshot ?? ""}
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index a2c74cb88..c5aad0df9 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -686,6 +686,16 @@ input[type="range"].blue-slider {
     z-index: 1;
   }
 
+  &.hover-scrubber-inactive {
+    .hover-scrubber-area {
+      cursor: inherit;
+    }
+
+    .hover-scrubber-indicator {
+      background-color: inherit;
+    }
+  }
+
   .hover-scrubber-indicator {
     background-color: rgba(255, 255, 255, 0.1);
     bottom: -100%;
diff --git a/ui/v2.5/src/components/Shared/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard.tsx
index 332bcaf04..2571ce80b 100644
--- a/ui/v2.5/src/components/Shared/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard.tsx
@@ -85,6 +85,7 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
     if (props.interactiveHeatmap) {
       return (
         <img
+          loading="lazy"
           src={props.interactiveHeatmap}
           alt="interactive heatmap"
           className="interactive-heatmap"
diff --git a/ui/v2.5/src/components/Studios/StudioCard.tsx b/ui/v2.5/src/components/Studios/StudioCard.tsx
index 3a5f51635..1acae33ea 100644
--- a/ui/v2.5/src/components/Studios/StudioCard.tsx
+++ b/ui/v2.5/src/components/Studios/StudioCard.tsx
@@ -160,6 +160,7 @@ export const StudioCard: React.FC<IProps> = ({
       linkClassName="studio-card-header"
       image={
         <img
+          loading="lazy"
           className="studio-card-image"
           alt={studio.name}
           src={studio.image_path ?? ""}
diff --git a/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx b/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx
index 327bb3ff5..e854e84c2 100644
--- a/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx
@@ -49,6 +49,7 @@ const TaggerSceneDetails: React.FC<ITaggerSceneDetails> = ({ scene }) => {
                     className="performer-tag col m-auto zoom-2"
                   >
                     <img
+                      loading="lazy"
                       className="image-thumbnail"
                       alt={performer.name ?? ""}
                       src={performer.image_path ?? ""}
diff --git a/ui/v2.5/src/components/Tagger/studios/StashSearchResult.tsx b/ui/v2.5/src/components/Tagger/studios/StashSearchResult.tsx
index 835f88545..9a78588c7 100644
--- a/ui/v2.5/src/components/Tagger/studios/StashSearchResult.tsx
+++ b/ui/v2.5/src/components/Tagger/studios/StashSearchResult.tsx
@@ -102,7 +102,12 @@ const StashSearchResult: React.FC<IStashSearchResultProps> = ({
       key={p.remote_site_id}
       onClick={() => setModalStudio(p)}
     >
-      <img src={(p.image ?? [])[0]} alt="" className="StudioTagger-thumb" />
+      <img
+        loading="lazy"
+        src={(p.image ?? [])[0]}
+        alt=""
+        className="StudioTagger-thumb"
+      />
       <span>{p.name}</span>
     </Button>
   ));
diff --git a/ui/v2.5/src/components/Tagger/studios/StudioTagger.tsx b/ui/v2.5/src/components/Tagger/studios/StudioTagger.tsx
index 1c4a643c3..b0499b8ab 100644
--- a/ui/v2.5/src/components/Tagger/studios/StudioTagger.tsx
+++ b/ui/v2.5/src/components/Tagger/studios/StudioTagger.tsx
@@ -611,7 +611,7 @@ const StudioTaggerList: React.FC<IStudioTaggerListProps> = ({
             <div></div>
             <div>
               <Card className="studio-card">
-                <img src={studio.image_path ?? ""} alt="" />
+                <img loading="lazy" src={studio.image_path ?? ""} alt="" />
               </Card>
             </div>
             <div className={`${CLASSNAME}-details-text`}>
diff --git a/ui/v2.5/src/components/Tags/TagCard.tsx b/ui/v2.5/src/components/Tags/TagCard.tsx
index 7c2d2afcf..9fd43eaa4 100644
--- a/ui/v2.5/src/components/Tags/TagCard.tsx
+++ b/ui/v2.5/src/components/Tags/TagCard.tsx
@@ -187,6 +187,7 @@ export const TagCard: React.FC<IProps> = ({
       linkClassName="tag-card-header"
       image={
         <img
+          loading="lazy"
           className="tag-card-image"
           alt={tag.name}
           src={tag.image_path ?? ""}
diff --git a/ui/v2.5/src/components/Wall/WallItem.tsx b/ui/v2.5/src/components/Wall/WallItem.tsx
index 686a355cc..427c060cc 100644
--- a/ui/v2.5/src/components/Wall/WallItem.tsx
+++ b/ui/v2.5/src/components/Wall/WallItem.tsx
@@ -66,6 +66,7 @@ const Preview: React.FC<{
 
   const image = (
     <img
+      loading="lazy"
       alt=""
       className="wall-item-media"
       src={