JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: only show when images are processing

Browse Source
This commit is contained in:
John Costa
2025-07-18 11:17:33 +01:00
parent a94c7255c6
commit e74975a52a
1 changed files with 46 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/notifications/ProcessingImages.tsx
View File

@ -56,50 +56,52 @@ export const ProcessingImages: Component = () => {
Object.keys(notifications.state.ProcessingImages).length; Object.keys(notifications.state.ProcessingImages).length;
return ( return (
<Popover sameWidth gutter={4}> <Show when={processingNumber() > 0}>
<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2"> <Popover sameWidth gutter={4}>
<Show <Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
when={processingNumber() > 0} <Show
fallback={<p class="text-md">No images to process</p>} when={processingNumber() > 0}
> fallback={<p class="text-md">No images to process</p>}
<p class="text-md"> >
Processing {processingNumber()}{" "} <p class="text-md">
{processingNumber() === 1 ? "image" : "images"} Processing {processingNumber()}{" "}
</p> {processingNumber() === 1 ? "image" : "images"}
</Show> </p>
<Show </Show>
when={processingNumber() === 0} <Show
fallback={<LoadingCircle status="loading" />} when={processingNumber() === 0}
> fallback={<LoadingCircle status="loading" />}
<LoadingCircle status="complete" /> >
</Show> <LoadingCircle status="complete" />
</Popover.Trigger> </Show>
<Popover.Portal> </Popover.Trigger>
<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2"> <Popover.Portal>
<For each={Object.entries(notifications.state.ProcessingImages)}> <Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
{([id, _image]) => ( <For each={Object.entries(notifications.state.ProcessingImages)}>
<Show when={_image}> {([id, _image]) => (
{(image) => ( <Show when={_image}>
<div class="flex gap-2 w-full justify-center"> {(image) => (
<img <div class="flex gap-2 w-full justify-center">
class="w-16 h-16 aspect-square rounded" <img
alt="processing" class="w-16 h-16 aspect-square rounded"
src={`${base}/image/${id}`} alt="processing"
/> src={`${base}/image/${id}`}
<div class="flex flex-col gap-1"> />
<p class="text-slate-100">{image().ImageName}</p> <div class="flex flex-col gap-1">
<p class="text-slate-100">{image().ImageName}</p>
</div>
<LoadingCircle
status="loading"
class="ml-auto self-center"
/>
</div> </div>
<LoadingCircle )}
status="loading" </Show>
class="ml-auto self-center" )}
/> </For>
</div> </Popover.Content>
)} </Popover.Portal>
</Show> </Popover>
)} </Show>
</For>
</Popover.Content>
</Popover.Portal>
</Popover>
); );
}; };