comments cleanup

examples/ai-image-generator/pages/index.jsx

@@ -7,14 +7,6 @@ export default function Main() {
   const [image, setImage] = useState("");
   const [loading, setLoading] = useState(false);
 
-  const showSpinner = () => {
-    setLoading(true);
-  };
-
-  const hideSpinner = () => {
-    setLoading(false);
-  };
-
   useEffect(() => {
     // Opens the panel for our app UI when we click on icon in the left sidebar
     if (new URLSearchParams(window.location.search).has("panel")) return;
@@ -32,7 +24,7 @@ export default function Main() {
 
   //drag and drop logic
   const drop = async ({ x, y, target }) => {
-    showSpinner();
+    setLoading(true);
 
     if (target instanceof HTMLImageElement) {
       const image = await window.miro.board.createImage({
@@ -42,7 +34,7 @@ export default function Main() {
       });
       await window.miro.board.viewport.zoomTo(image);
     }
-    hideSpinner();
+    setLoading(false);
   };
 
   //handles the prompt input being typed in
@@ -51,9 +43,8 @@ export default function Main() {
   };
 
   const handleButtonClick = async () => {
-    //setting the image source to be a transparent color, otherwise we have a border which looks bad
     setImage("");
-    showSpinner();
+    setLoading(true);
 
     // post our prompt to our backend
     try {
@@ -73,7 +64,7 @@ export default function Main() {
     } catch (err) {
       console.log(err);
     }
-    hideSpinner();
+    setLoading(false);
   };
 
   return (
@@ -88,9 +79,8 @@ export default function Main() {
       {/* Button which calls the OpenAI backend (pages/api/openai.js) with the prompt */}
       <Button onClick={handleButtonClick}>Generate Image</Button>
 
-      {/* Spinner needs to be hidden by default, otherwise will spin when opening app first time */}
-
       <div className="image-container cs1 ce12">
+        {/* Spinner needs to be hidden by default, otherwise will spin when opening app first time */}
         {Boolean(loading) && <div className="spinner" />}
         {/* Img which needs to be draggable */}
         {Boolean(image) && <img className="miro-draggable" src={image} />}