From 0519f291e6b57c27ac708ecba95749e2a08d9535 Mon Sep 17 00:00:00 2001
From: Dragoon Dorise <rodrigosedano@me.com>
Date: Sun, 10 Nov 2024 01:00:56 +0100
Subject: [PATCH] + performance

---
 src/components/Game.tsx  | 70 ++++++++++++++++++++++++++++++----------
 src/components/Games.tsx |  3 --
 2 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index ee38c69..54685eb 100644
--- a/src/components/Game.tsx
+++ b/src/components/Game.tsx
@@ -1,38 +1,74 @@
-import { VFC, useState, useEffect } from "react";
+import { VFC, useState, useEffect, useRef } from "react";
 import { Button } from "decky-frontend-lib";
 
-const Game = ({ item, game, random, launchGame, fixArtwork, loadMore, setIsFocus, isFocus }) => {
+const Game = ({ item, game, random, launchGame, fixArtwork, loadMore }) => {
+  const [isFocus, setIsFocus] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const targetRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      {
+        root: null, // viewport
+        rootMargin: "0px", // no margin
+        threshold: 0.5, // 50% of target visible
+      }
+    );
+
+    if (targetRef.current) {
+      observer.observe(targetRef.current);
+    }
+
+    // Clean up the observer
+    return () => {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+    };
+  }, []);
+
   return (
     <Button
+      ref={targetRef}
       className="game"
+      onGamepadFocus={() => setIsFocus(true)}
+      onGamepadBlur={() => setIsFocus(false)}
       onClick={() => launchGame(item.launcher, game.filename, game.name)}
       onSecondaryActionDescription={"Fix Artwork"}
       onOKActionDescription="Launch"
       onCancelActionDescription="Exit"
       onSecondaryButton={() => fixArtwork(game.name)}
       onButtonDown={() => loadMore()}>
-      {isFocus && (
-        <div
-          className="_1sTuvqUAeproqHEae5sn9z"
-          style={{
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            top: "0px",
-            left: "0px",
-          }}></div>
+      {isVisible && (
+        <img loading="lazy" className="game__img" src={`${game.img}?id=${random}`} alt={game.name.replace(/_/g, " ")} />
       )}
-      <img loading="lazy" className="game__img" src={`${game.img}?id=${random}`} alt={game.name.replace(/_/g, " ")} />
       {/* <img
         loading="lazy"
         className="game__cartridge"
         src={`/customimages/emudeck/default/${game.platform}.png?id=${random}`}
         alt="Super Nintendo"
       /> */}
-      <img loading="lazy" className="game__bg" src={`${game.img}?id=${random}`} alt={game.name} />
-      <div className="game__file">
-        <span>{game.file}</span>
-      </div>
+      {isFocus && (
+        <>
+          <div
+            className="_1sTuvqUAeproqHEae5sn9z"
+            style={{
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              top: "0px",
+              left: "0px",
+            }}></div>
+
+          <img loading="lazy" className="game__bg" src={`${game.img}?id=${random}`} alt={game.name} />
+          <div className="game__file">
+            <span>{game.file}</span>
+          </div>
+        </>
+      )}
     </Button>
   );
 };
diff --git a/src/components/Games.tsx b/src/components/Games.tsx
index 774c106..7d146d9 100644
--- a/src/components/Games.tsx
+++ b/src/components/Games.tsx
@@ -212,7 +212,6 @@ const Games: VFC<{ serverAPI: any }> = ({ serverAPI }) => {
   });
   const [percentage, setPercentage] = useState(0);
   const [searchTerm, setSearchTerm] = useState("");
-  const [isFocus, setIsFocus] = useState(false);
   const [currentTab, setCurrentTab] = useState<string>("Tab1");
   const [visibleCount, setVisibleCount] = useState(20);
 
@@ -356,8 +355,6 @@ const Games: VFC<{ serverAPI: any }> = ({ serverAPI }) => {
                       launchGame={launchGame}
                       fixArtwork={fixArtwork}
                       loadMore={loadMore}
-                      setIsFocus={setIsFocus}
-                      isFocus={isFocus}
                     />
                   );
                 })}