@evatril/video-templates 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "",
   "main": "src/index.js",
   "remotion": {

package/src/Invitations/hooks/usePreloadImages.js

@@ -1,44 +1,37 @@
-import { useState, useEffect } from "react";
-import { delayRender, continueRender } from "remotion";
+import { useEffect, useState } from "react";
+import { delayRender, continueRender, prefetch } from "remotion";
 
 export const usePreloadImages = (imageSources) => {
   const [handle] = useState(() => delayRender("Preloading images"));
-  const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
-    let cancelled = false;
-
-    const done = () => {
-      if (!cancelled) {
-        setLoaded(true);
-        continueRender(handle);
-      }
-    };
-
     if (!imageSources || imageSources.length === 0) {
-      done();
+      continueRender(handle);
       return;
     }
 
+    let cancelled = false;
+
     Promise.all(
-      imageSources.map(
-        (src) =>
-          new Promise((resolve) => {
-            const img = new Image();
-            img.onload = resolve;
-            img.onerror = resolve;
-            img.src = src;
-          }),
-      ),
+      imageSources.map((src) =>
+        prefetch(src)
+          .then(({ waitUntilDone }) => waitUntilDone())
+          .catch(() => null) // never block render
+      )
     )
-      .then(done)
-      .catch(done);
+      .then(() => {
+        if (!cancelled) {
+          continueRender(handle);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          continueRender(handle);
+        }
+      });
 
     return () => {
       cancelled = true;
-      continueRender(handle); // 🔥 safety cleanup
     };
   }, [handle, imageSources]);
-
-  return loaded;
 };