diff --git a/examples/ai-image-generator/pages/index.jsx b/examples/ai-image-generator/pages/index.jsx index 7e1fda3a2..810019ff3 100644 --- a/examples/ai-image-generator/pages/index.jsx +++ b/examples/ai-image-generator/pages/index.jsx @@ -20,8 +20,18 @@ export const getServerSideProps = async function getServerSideProps({ req }) { }; export default function Main({ authUrl }) { + // Shows spinner while API calls are in progress / image is being dragged & dropped + const showSpinner = () => { + const spinner = document.getElementById("spinner"); + spinner.style.visibility = "visible"; + }; + + // Removes spinner when API calls are finished and data is returned / image has been dropped + const removeSpinner = () => { + const spinner = document.getElementById("spinner"); + spinner.style.visibility = "hidden"; + }; useEffect(() => { - removeSpinner(); // 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; window.miro.board.ui.on("icon:click", async () => { @@ -58,18 +68,6 @@ export default function Main({ authUrl }) { setInputValue(newValue); }; - // Shows spinner while API calls are in progress / image is being dragged & dropped - const showSpinner = () => { - const spinner = document.getElementById("spinner"); - spinner.style.visibility = "visible"; - }; - - // Removes spinner when API calls are finished and data is returned / image has been dropped - const removeSpinner = () => { - const spinner = document.getElementById("spinner"); - spinner.style.visibility = "hidden"; - }; - const handleButtonClick = async () => { //setting the image source to be a transparent color, otherwise we have a border which looks bad document.querySelector("#image").src = @@ -128,7 +126,12 @@ export default function Main({ authUrl }) { id="generateImgBtn" /> - <div className="spinner" id="spinner"></div> + {/* Spinner needs to be hidden by default, otherwise will spin when opening app first time */} + <div + className="spinner" + id="spinner" + style={{ visibility: "hidden" }} + ></div> <div className="image-container"> {/* Img which needs to be draggable */} <img