From 71dfe5647e13764695decc40f3f9394680fd3377 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Sat, 10 May 2025 16:57:02 +0100
Subject: [PATCH] feat: adding processing image component

---
 frontend/src/Search.tsx                         |  6 +++---
 frontend/src/notifications/ProcessingImages.tsx | 13 +++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/notifications/ProcessingImages.tsx

diff --git a/frontend/src/Search.tsx b/frontend/src/Search.tsx
index d21ef23..83a6746 100644
--- a/frontend/src/Search.tsx
+++ b/frontend/src/Search.tsx
@@ -18,15 +18,13 @@ import { useSearchImageContext } from "./contexts/SearchImageContext";
 import { A } from "@solidjs/router";
 import { useSetEntity } from "./WithEntityDialog";
 import { useNotifications } from "./ProtectedRoute";
+import { ProcessingImages } from "./notifications/ProcessingImages";
 
 export const Search = () => {
     const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
     const [searchQuery, setSearchQuery] = createSignal("");
     const setEntity = useSetEntity();
 
-    const notifications = useNotifications();
-    console.log(notifications);
-
     const { images, imagesWithProperties, onRefetchImages } =
         useSearchImageContext();
 
@@ -168,6 +166,8 @@ export const Search = () => {
                     </div>
                 </div>
 
+                <ProcessingImages />
+
                 <div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
                     <For each={Object.keys(imagesWithProperties())}>
                         {(imageId) => (
diff --git a/frontend/src/notifications/ProcessingImages.tsx b/frontend/src/notifications/ProcessingImages.tsx
new file mode 100644
index 0000000..73ab363
--- /dev/null
+++ b/frontend/src/notifications/ProcessingImages.tsx
@@ -0,0 +1,13 @@
+import { type Component, For } from "solid-js";
+import { useNotifications } from "../ProtectedRoute";
+import { base } from "../network";
+
+export const ProcessingImages: Component = () => {
+    const notifications = useNotifications();
+
+    return (
+        <For each={Object.entries(notifications.state.ProcessingImages)}>
+            {([id]) => <img alt="processing" src={`${base}/image/${id}`} />}
+        </For>
+    );
+};