Skeleton fixes (#10060)

* don't load metadata until image has loaded

* correct class name and remove lazy loading pkg

web/package-lock.json

@@ -27,7 +27,6 @@
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
-        "@types/react-lazy-load-image-component": "^1.6.3",
         "apexcharts": "^3.45.1",
         "axios": "^1.6.2",
         "class-variance-authority": "^0.7.0",
@@ -46,7 +45,6 @@
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
         "react-icons": "^4.12.0",
-        "react-lazy-load-image-component": "^1.6.0",
         "react-router-dom": "^6.20.1",
         "react-transition-group": "^4.4.5",
         "react-use-websocket": "^4.5.0",
@@ -2596,12 +2594,14 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.41",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.41.tgz",
       "integrity": "sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==",
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2627,15 +2627,6 @@
         "react-icons": "*"
       }
     },
-    "node_modules/@types/react-lazy-load-image-component": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
-      "integrity": "sha512-HsIsYz7yWWTh/bftdzGnijKD26JyofLRqM/RM80sxs7Gk13G83ew8R/ra2XzXuiZfjNEjAq/Va+NBHFF9ciwxA==",
-      "dependencies": {
-        "@types/react": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -2648,7 +2639,8 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "devOptional": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.6",
@@ -5465,38 +5457,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
-    "node_modules/lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
-    },
-    "node_modules/log-symbols": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.1.0",
-        "is-unicode-supported": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6724,19 +6690,6 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
-    "node_modules/react-lazy-load-image-component": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz",
-      "integrity": "sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==",
-      "dependencies": {
-        "lodash.debounce": "^4.0.8",
-        "lodash.throttle": "^4.1.1"
-      },
-      "peerDependencies": {
-        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x",
-        "react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
-      }
-    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",

web/package.json

@@ -32,7 +32,6 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@types/react-lazy-load-image-component": "^1.6.3",
     "apexcharts": "^3.45.1",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
@@ -51,7 +50,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^4.12.0",
-    "react-lazy-load-image-component": "^1.6.0",
     "react-router-dom": "^6.20.1",
     "react-transition-group": "^4.4.5",
     "react-use-websocket": "^4.5.0",

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -20,7 +20,6 @@ import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
 import axios from "axios";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { Skeleton } from "../ui/skeleton";
-import { LazyLoadImage } from "react-lazy-load-image-component";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -122,48 +121,53 @@ export default function PreviewThumbnailPlayer({
               />
             </div>
           )}
-          <LazyLoadImage
+          {!imgLoaded && (
-            className={`w-full h-full transition-opacity ${
+            <Skeleton className={`absolute inset-0 w-full h-full`} />
-              playingBack ? "opacity-0" : "opacity-100"
-            }`}
-            src={`${apiHost}${review.thumb_path.replace(
-              "/media/frigate/",
-              ""
-            )}`}
-            onLoad={() => {
-              setImgLoaded(true);
-            }}
-            placeholder={<Skeleton className="w-full h-full rounded-xl" />}
-          />
-
-          {!playingBack && imgLoaded && (
-            <>
-              <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none animate-in fade-in">
-                <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
-                  {(review.severity == "alert" ||
-                    review.severity == "detection") && (
-                    <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
-                      {review.data.objects.map((object) => {
-                        return getIconForLabel(object, "w-3 h-3 text-white");
-                      })}
-                      {review.data.audio.map((audio) => {
-                        return getIconForLabel(audio, "w-3 h-3 text-white");
-                      })}
-                      {review.data.sub_labels?.map((sub) => {
-                        return getIconForSubLabel(sub, "w-3 h-3 text-white");
-                      })}
-                    </Chip>
-                  )}
-                </div>
-              </div>
-              <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none animate-in fade-in">
-                <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
-                  <TimeAgo time={review.start_time * 1000} dense />
-                  {formattedDate}
-                </div>
-              </div>
-            </>
           )}
+          <div className={`${imgLoaded ? "visible" : "invisible"}`}>
+            <img
+              className={`w-full h-full transition-opacity ${
+                playingBack ? "opacity-0" : "opacity-100"
+              }`}
+              src={`${apiHost}${review.thumb_path.replace(
+                "/media/frigate/",
+                ""
+              )}`}
+              loading="lazy"
+              onLoad={() => {
+                setImgLoaded(true);
+              }}
+            />
+
+            {!playingBack && (
+              <>
+                <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none">
+                  <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
+                    {(review.severity == "alert" ||
+                      review.severity == "detection") && (
+                      <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
+                        {review.data.objects.map((object) => {
+                          return getIconForLabel(object, "w-3 h-3 text-white");
+                        })}
+                        {review.data.audio.map((audio) => {
+                          return getIconForLabel(audio, "w-3 h-3 text-white");
+                        })}
+                        {review.data.sub_labels?.map((sub) => {
+                          return getIconForSubLabel(sub, "w-3 h-3 text-white");
+                        })}
+                      </Chip>
+                    )}
+                  </div>
+                </div>
+                <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none">
+                  <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
+                    <TimeAgo time={review.start_time * 1000} dense />
+                    {formattedDate}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
           {playingBack && (
             <Slider
               className="absolute left-0 right-0 bottom-0 z-10"
@@ -358,7 +362,7 @@ function InProgressPreview({
 
   if (!previewFrames || previewFrames.length == 0) {
     return (
-      <LazyLoadImage
+      <img
         className="h-full w-full"
         src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
       />