ugcinc-render 1.8.110 → 1.8.111

package/dist/index.js

@@ -4049,6 +4049,18 @@ function InstagramDmComposition(props) {
   const [scrollX, setScrollX] = (0, import_react8.useState)(0);
   const [scrollY, setScrollY] = (0, import_react8.useState)(0);
   const [referenceVisible, setReferenceVisible] = (0, import_react8.useState)(true);
+  const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    const handle = (0, import_remotion9.delayRender)("Loading fonts for InstagramDmComposition");
+    preloadFonts().then(() => {
+      setFontsLoaded(true);
+      (0, import_remotion9.continueRender)(handle);
+    }).catch((err) => {
+      console.error("Failed to load fonts:", err);
+      setFontsLoaded(true);
+      (0, import_remotion9.continueRender)(handle);
+    });
+  }, []);
   const handleZoomChange = (0, import_react8.useCallback)((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
@@ -4058,8 +4070,11 @@ function InstagramDmComposition(props) {
     setReferenceVisible((prev) => !prev);
   }, []);
   const { elements, imageUrls } = (0, import_react8.useMemo)(() => {
+    if (!fontsLoaded) {
+      return { elements: [], imageUrls: {} };
+    }
     return convertPropsToElements(props);
-  }, [props]);
+  }, [props, fontsLoaded]);
   const colors = getThemeColors(theme);
   const zoomScale = zoom / 100;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(

package/dist/index.mjs

@@ -1947,8 +1947,8 @@ function ScreenshotAnimation({
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-import { useCallback as useCallback2, useMemo as useMemo7, useState as useState3 } from "react";
-import { AbsoluteFill as AbsoluteFill5, Img as Img4 } from "remotion";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo7, useState as useState3 } from "react";
+import { AbsoluteFill as AbsoluteFill5, Img as Img4, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 
 // src/compositions/InstagramDmComposition/theme.ts
 var IG_THEME_COLORS = {
@@ -3118,6 +3118,18 @@ function InstagramDmComposition(props) {
   const [scrollX, setScrollX] = useState3(0);
   const [scrollY, setScrollY] = useState3(0);
   const [referenceVisible, setReferenceVisible] = useState3(true);
+  const [fontsLoaded, setFontsLoaded] = useState3(false);
+  useEffect3(() => {
+    const handle = delayRender2("Loading fonts for InstagramDmComposition");
+    preloadFonts().then(() => {
+      setFontsLoaded(true);
+      continueRender2(handle);
+    }).catch((err) => {
+      console.error("Failed to load fonts:", err);
+      setFontsLoaded(true);
+      continueRender2(handle);
+    });
+  }, []);
   const handleZoomChange = useCallback2((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
@@ -3127,8 +3139,11 @@ function InstagramDmComposition(props) {
     setReferenceVisible((prev) => !prev);
   }, []);
   const { elements, imageUrls } = useMemo7(() => {
+    if (!fontsLoaded) {
+      return { elements: [], imageUrls: {} };
+    }
     return convertPropsToElements(props);
-  }, [props]);
+  }, [props, fontsLoaded]);
   const colors = getThemeColors(theme);
   const zoomScale = zoom / 100;
   return /* @__PURE__ */ jsxs8(
@@ -3591,10 +3606,10 @@ function MediaBubble({
 }
 
 // src/hooks/index.ts
-import { useEffect as useEffect3, useState as useState4, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect4, useState as useState4, useMemo as useMemo8 } from "react";
 function useFontsLoaded() {
   const [loaded, setLoaded] = useState4(areFontsLoaded());
-  useEffect3(() => {
+  useEffect4(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -3603,7 +3618,7 @@ function useFontsLoaded() {
 }
 function useImageLoader(src) {
   const [image, setImage] = useState4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!src) {
       setImage(null);
       return;
@@ -3625,7 +3640,7 @@ function useImageLoader(src) {
 function useImagePreloader(sources) {
   const [images, setImages] = useState4({});
   const [loaded, setLoaded] = useState4(false);
-  useEffect3(() => {
+  useEffect4(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.110",
+  "version": "1.8.111",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",