From 568dfe04871bcecb97dc832fa9381da49c8487b6 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Fri, 28 Mar 2025 09:13:10 -0500
Subject: [PATCH] image performance improvements

---
 .../Global/components/blurhashed-image.tsx     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/Global/components/blurhashed-image.tsx b/components/Global/components/blurhashed-image.tsx
index f6b89554..0f810d62 100644
--- a/components/Global/components/blurhashed-image.tsx
+++ b/components/Global/components/blurhashed-image.tsx
@@ -15,6 +15,20 @@ interface BlurhashLoadingProps {
     borderRadius?: number | undefined
 }
 
+/**
+ * A React component that will render a Blurhash
+ * string as an image while loading the full image
+ * from the server
+ * 
+ * Image Query is stale after 30 minutes and collected
+ * after an hour to keep the cache size down and the 
+ * app performant
+ * 
+ * TODO: Keep images in offline mode
+ * 
+ * @param param0 
+ * @returns 
+ */
 export default function BlurhashedImage({ 
     item, 
     width, 
@@ -32,8 +46,8 @@ export default function BlurhashedImage({
             Math.ceil(height ?? width / 100) * 100 // So these keys need to match
         ],
         queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary, width, height ?? width),
-        staleTime: (1000 * 60 * 60) * 1,
-        gcTime: (1000 * 60 * 60) * 3,
+        staleTime: (1000 * 60 * 30), // 30 minutes
+        gcTime: (1000 * 60 * 60), // 1 hour
         refetchOnMount: false,
         refetchOnWindowFocus: false
     });