From 895565aa3ad706cca6818db1dbab940029a0d5e2 Mon Sep 17 00:00:00 2001
From: Yuri <yuripetusko@gmail.com>
Date: Mon, 22 Apr 2024 12:20:43 +0200
Subject: [PATCH] fix: clear extractImageTimeout timeout on onMount

---
 .../src/lib/rmrk-2d-renderer.tsx               | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx b/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx
index 4480508..651a3ac 100644
--- a/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx
+++ b/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx
@@ -5,7 +5,7 @@ import DOMPurify from 'isomorphic-dompurify';
 import { Loader2 } from 'lucide-react';
 import { Application, Resource, Texture } from 'pixi.js';
 import type { ICanvas } from 'pixi.js';
-import type { CSSProperties } from 'react';
+import { type CSSProperties, useRef } from 'react';
 import React, { useEffect, useMemo } from 'react';
 import { useCallback, useState } from 'react';
 import useImage from 'use-image';
@@ -73,18 +73,28 @@ const useBackdropImage = (
 
   // Get image from canvas to apply as a backdrop background
   const extractImage = async (pixiApp: Application<ICanvas>) => {
-    const blob = await pixiApp.renderer.extract.image(pixiApp.stage);
-    setBgImage(blob.src);
+    if (pixiApp.stage) {
+      const blob = await pixiApp.renderer.extract.image(pixiApp.stage);
+      setBgImage(blob.src);
+    }
   };
 
+  const extractImageTimeout = useRef<NodeJS.Timeout>();
+
   // Get image from canvas to apply as a backdrop background
   useEffect(() => {
     if (!bgImage && !!pixiApp && enabled) {
       // Wait for the canvas to be rendered
-      setTimeout(() => {
+      extractImageTimeout.current = setTimeout(() => {
         extractImage(pixiApp);
       }, 600);
     }
+
+    return () => {
+      if (extractImageTimeout.current) {
+        clearTimeout(extractImageTimeout.current);
+      }
+    };
   }, [pixiApp, enabled, bgImage, extractImage]);
 
   return bgImage;