From 9952842a40c536ba4e19f67ffdb504b8d62d8c15 Mon Sep 17 00:00:00 2001
From: James Brunton <james@stirlingpdf.com>
Date: Tue, 16 Sep 2025 11:52:19 +0100
Subject: [PATCH] Fix thumbnail rendering

---
 .../tools/rotate/RotateSettings.tsx           | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/tools/rotate/RotateSettings.tsx b/frontend/src/components/tools/rotate/RotateSettings.tsx
index da0dc23b6..ab1d0de39 100644
--- a/frontend/src/components/tools/rotate/RotateSettings.tsx
+++ b/frontend/src/components/tools/rotate/RotateSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { Stack, Text, Box, ActionIcon, Group, Center } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
@@ -24,21 +24,29 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
   }, [selectedFiles]);
 
   // Get thumbnail for the selected file
-  const thumbnail = useMemo(() => {
-    if (!selectedFile) return null;
+  const [thumbnail, setThumbnail] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!selectedFile) {
+      setThumbnail(null);
+      return;
+    }
 
     const pageId = `${selectedFile.fileId}-1`;
-    
+
     // Try to get cached thumbnail first
     const cached = getThumbnailFromCache(pageId);
-    if (cached) return cached;
+    if (cached) {
+      setThumbnail(cached);
+      return;
+    }
 
     // Request thumbnail if not cached
-    requestThumbnail(pageId, selectedFile, 1).then(() => {
-      // Component will re-render when thumbnail is available
+    requestThumbnail(pageId, selectedFile, 1).then((result) => {
+      setThumbnail(result);
+    }).catch(() => {
+      setThumbnail(null);
     });
-
-    return null;
   }, [selectedFile, getThumbnailFromCache, requestThumbnail]);
 
   // Calculate current angle display