From cee679d6e3b8a5c330ffc7dd4ed24c415e9e3aa5 Mon Sep 17 00:00:00 2001
From: Lukas <76838159+wolflu05@users.noreply.github.com>
Date: Mon, 28 Apr 2025 01:13:18 +0200
Subject: [PATCH] fix pdf preview with background worker (#9591)

---
 .../TemplateEditor/PdfPreview/PdfPreview.tsx  | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx
index af2201fd29..c1ac246fac 100644
--- a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx
@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/react/macro';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 
+import { ApiEndpoints, apiUrl } from '@lib/index';
 import { api } from '../../../../App';
 import type { PreviewAreaComponent } from '../TemplateEditor';
 
@@ -50,8 +51,37 @@ export const PdfPreviewComponent: PreviewAreaComponent = forwardRef(
           throw new Error(preview.data);
         }
 
-        if (preview?.data?.output) {
-          preview = await api.get(preview.data.output, {
+        let outputUrl = preview?.data?.output;
+        if (preview.data && !preview.data.complete) {
+          outputUrl = await new Promise((res, rej) => {
+            let cnt = 0;
+            const interval = setInterval(() => {
+              api
+                .get(apiUrl(ApiEndpoints.data_output, preview.data.pk))
+                .then((response) => {
+                  if (response.data.error) {
+                    clearInterval(interval);
+                    rej(response.data.error);
+                  }
+
+                  if (response.data.complete) {
+                    clearInterval(interval);
+                    res(response.data.output);
+                  }
+
+                  // timeout after 1 minute
+                  if (cnt > 2 * 60) {
+                    clearInterval(interval);
+                    rej('Timeout');
+                  }
+                  cnt++;
+                });
+            }, 500);
+          });
+        }
+
+        if (outputUrl) {
+          preview = await api.get(outputUrl, {
             responseType: 'blob'
           });
         }