frontend/src/components/editor/ComposeCanvas.tsx

@@ -260,17 +260,35 @@ export function ComposeCanvas({
     let resizeObserver: ResizeObserver | null = null;
     let lastWidth = 0;
 
+    const getInitialWidth = async () => {
+      if (!wrapperRef.current) return BASE_WIDTH;
+      let width = wrapperRef.current.clientWidth;
+      if (width === 0) {
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
+      }
+      return width;
+    };
+
+    const initResizeOberver = () => {
+      if (!wrapperRef.current) return null;
+      const observer = new ResizeObserver(() => {
+        const nextWidth = wrapperRef.current?.clientWidth;
+        if (!nextWidth || nextWidth === lastWidth) return;
+        lastWidth = nextWidth;
+        syncViewport();
+      });
+      observer.observe(wrapperRef.current);
+      return observer;
+    };
+
     const initCanvas = async () => {
       // HACK: actual font may change the text-width - small ux improvement
       await document.fonts.ready;
 
       if (!(wrapperRef.current && canvasRef.current && isMounted)) return;
 
-      let width = wrapperRef.current.clientWidth;
+      const width = await getInitialWidth();
-      if (width === 0) {
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
-      }
 
       // init the fabric instance
       const canvas = new fabric.Canvas(canvasRef.current, {
@@ -301,15 +319,7 @@ export function ComposeCanvas({
 
       // auto window resizing based width
       lastWidth = wrapperRef.current.clientWidth;
-      resizeObserver = new ResizeObserver(() => {
+      resizeObserver = initResizeOberver();
-        const nextWidth = wrapperRef.current?.clientWidth;
-        if (!nextWidth || nextWidth === lastWidth) return;
-        lastWidth = nextWidth;
-        syncViewport();
-      });
-      if (wrapperRef.current) {
-        resizeObserver.observe(wrapperRef.current);
-      }
     };
 
     initCanvas().then();

frontend/src/pages/Reader.tsx

@@ -191,25 +191,27 @@ export default function Reader() {
       setDecryptedCanvasData(canvasData);
     };
 
-    const loadAndDecrypt = async () => {
+    const processLetterData = async (data: LetterResponseData) => {
+      if (data.status === "BURNED")
+        throw new Error("This letter has been burned.");
+
+      if (data.encrypted_dek) setEncryptedDek(data.encrypted_dek);
+
+      const isDecryptionKeyAvailable = data.encrypted_dek && masterKey;
+      if (!(!!sharingKey || isDecryptionKeyAvailable)) {
+        throw new Error("Auth required: Decryption key is not available");
+      }
+
+      const cryptoUtils = new CryptoUtils();
+      await decryptLetterData(data, cryptoUtils);
+    };
+
+    const loadAndDecryptLetter = async () => {
       try {
         const response: AxiosResponse<LetterResponseData> = await api.get(
           `${endpoints.LETTERS}${public_id}/`,
         );
-        const data = response.data;
+        await processLetterData(response.data);
-
-        if (data.status === "BURNED")
-          throw new Error("This letter has been burned.");
-
-        if (data.encrypted_dek) setEncryptedDek(data.encrypted_dek);
-
-        const isDecryptionKeyAvailable = data.encrypted_dek && masterKey;
-        if (!(!!sharingKey || isDecryptionKeyAvailable)) {
-          throw new Error("Auth required: Decryption key is not available");
-        }
-
-        const cryptoUtils = new CryptoUtils();
-        await decryptLetterData(data, cryptoUtils);
       } catch (err) {
         setLogTrace({
           message: `Failed to load letter ☹`,
@@ -219,7 +221,7 @@ export default function Reader() {
       }
     };
 
-    loadAndDecrypt().then(() => setIsDecrypting(false));
+    loadAndDecryptLetter().then(() => setIsDecrypting(false));
   }, [public_id, sharingKey, masterKey]);
 
   useEffect(() => {