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;
-      if (width === 0) {
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
-      }
+      const width = await getInitialWidth();
 
       // 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(() => {
-        const nextWidth = wrapperRef.current?.clientWidth;
-        if (!nextWidth || nextWidth === lastWidth) return;
-        lastWidth = nextWidth;
-        syncViewport();
-      });
-      if (wrapperRef.current) {
-        resizeObserver.observe(wrapperRef.current);
-      }
+      resizeObserver = initResizeOberver();
     };
 
     initCanvas().then();

frontend/src/pages/Reader.tsx

@@ -191,13 +191,7 @@ export default function Reader() {
       setDecryptedCanvasData(canvasData);
     };
 
-    const loadAndDecrypt = async () => {
-      try {
-        const response: AxiosResponse<LetterResponseData> = await api.get(
-          `${endpoints.LETTERS}${public_id}/`,
-        );
-        const data = response.data;
-
+    const processLetterData = async (data: LetterResponseData) => {
       if (data.status === "BURNED")
         throw new Error("This letter has been burned.");
 
@@ -210,6 +204,14 @@ export default function Reader() {
 
       const cryptoUtils = new CryptoUtils();
       await decryptLetterData(data, cryptoUtils);
+    };
+
+    const loadAndDecryptLetter = async () => {
+      try {
+        const response: AxiosResponse<LetterResponseData> = await api.get(
+          `${endpoints.LETTERS}${public_id}/`,
+        );
+        await processLetterData(response.data);
       } 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(() => {