add basic loading

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -14,7 +14,6 @@ import {
 } from //@ts-expect-error
   "./imageModifiers.css.ts";
 
-
 import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { useCreateUI } from "../creationPanelUIStore";
 

ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx

@@ -8,15 +8,17 @@ import {
 import { CompletedImagesType } from "../index";
 
 interface CurrentDisplayProps {
+  isLoading: boolean;
   image: CompletedImagesType | null;
 }
 
-export default function CurrentDisplay({ image }: CurrentDisplayProps) {
+export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps) {
   // @ts-ignore
-  const { info, data } = image != null || { info: null, data: null };
+  const { info, data } = image;
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-
+  console.log('current data', data);
+  console.log('current info', info);
   const createFileName = () => {
     const {
       prompt,
@@ -29,6 +31,9 @@ export default function CurrentDisplay({ image }: CurrentDisplayProps) {
       height,
     } = info;
 
+
+
+
     // Most important information is the prompt
     let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
     underscoreName = underscoreName.substring(0, 100);
@@ -60,19 +65,22 @@ export default function CurrentDisplay({ image }: CurrentDisplayProps) {
     setRequestOption("init_image", data);
   };
 
+
   return (
     <div className="current-display">
-      {image != null && (
+      {isLoading
+        ? <h4 className="loading">Loading...</h4>
+        : (image != null && (
           <div>
-          <p> {info.prompt}</p>
+            <p> {info?.prompt}</p>
             <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
-
             <div>
               <button onClick={_handleSave}>Save</button>
               <button onClick={_handleUseAsInput}>Use as Input</button>
             </div>
           </div>
-      )}
+        )) || <h4 className="no-image">Try Making a new image!</h4>}
+
       <div></div>
     </div>
   );

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -39,15 +39,37 @@ export default function DisplayPanel() {
     null
   );
 
+
+
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+
   const { status, data } = useQuery(
     [MakeImageKey, id],
     async () => await doMakeImage(options),
     {
-      enabled: void 0 !== id,
+      enabled: isEnabled
+      // void 0 !== id,
     }
   );
+  // update the enabled state when the id changes
+  useEffect(() => {
+    setIsEnabled(void 0 !== id)
+  }, [id]);
 
   useEffect(() => {
+    if (isEnabled && status === "loading") {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [isEnabled, status]);
+
+
+  useEffect(() => {
+    console.log("status", status);
     // query is done
     if (status === "success") {
       // check to make sure that the image was created
@@ -76,7 +98,7 @@ export default function DisplayPanel() {
     const completedQueries = completedIds.map((id) => {
       const imageData = queryClient.getQueryData([MakeImageKey, id]);
       return imageData;
-    });
+    }) as ImageRequest[];
 
     if (completedQueries.length > 0) {
       // map the completedImagesto a new array
@@ -98,10 +120,12 @@ export default function DisplayPanel() {
         })
         .flat()
         .reverse()
-        .filter((item) => void 0 !== item); // remove undefined items
+        .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
 
       setCompletedImages(temp);
-      debugger;
+
+      console.log("temp", temp);
+
       setCurrentImage(temp[0] || null);
     } else {
       setCompletedImages([]);
@@ -109,11 +133,15 @@ export default function DisplayPanel() {
     }
   }, [setCompletedImages, setCurrentImage, queryClient, completedIds]);
 
+  useEffect(() => {
+    console.log("completedImages", currentImage);
+  }, [currentImage]);
+
   return (
     <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
       <div className={displayContainer}>
-        <CurrentDisplay image={currentImage}></CurrentDisplay>
+        <CurrentDisplay isLoading={isLoading} image={currentImage}></CurrentDisplay>
       </div>
       <div className={previousImages}>
         <CompletedImages