feat: adding processing image component

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) => (

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>
+    );
+};