loading phrases, download button, loading toast removed

aibiansari · Aug 21, 2024 · 58e1f75 · 58e1f75
1 parent 792f39e
commit 58e1f75
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,11 @@
 import { useState, useRef, useEffect } from "react";
 import generateImage from "./api/schnell";
 import { RxCross2 } from "react-icons/rx";
+import { ImSpinner9 } from "react-icons/im";
 import icon from "/icon.webp";
 import Footer from "./components/ui/footer";
 import ImageContainer from "./components/ui/imgContainer";
+import getRandomPhrase from "./utils/loadingPhrases";
 
 import {
   AlertDialog,
@@ -21,6 +23,8 @@ import { Checkbox } from "@/components/ui/checkbox";
 import About from "./components/ui/about";
 
 const App = () => {
+  const generateButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [loadingPhrase, setLoadingPhrase] = useState("Generating Image...");
   const [prompt, setPrompt] = useState("");
   const [imageSrc, setImageSrc] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -48,8 +52,6 @@ const App = () => {
     localStorage.setItem("showAlert", JSON.stringify(showAlert));
   }, [showAlert]);
 
-  const generateButtonRef = useRef<HTMLButtonElement | null>(null);
-
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -62,6 +64,7 @@ const App = () => {
   const handleGenerateImage = async () => {
     if (prompt.trim() === "") return; // Prevent generating an image with an empty prompt
     setIsLoading(true);
+    setLoadingPhrase(getRandomPhrase);
     await generateImage({ prompt, setImageSrc, setPrompt, setHistory });
     setIsLoading(false);
   };
@@ -140,7 +143,14 @@ const App = () => {
             }`}
             disabled={isLoading} // Disable button while loading
           >
-            {isLoading ? "Generating..." : "Generate Image"}
+            {isLoading ? (
+              <div className="flex items-center justify-center gap-2.5">
+                <ImSpinner9 className="animate-spin" />
+                {loadingPhrase}
+              </div>
+            ) : (
+              "Generate Image"
+            )}
           </button>
         </div>
 

diff --git a/src/api/schnell.ts b/src/api/schnell.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import blobToBase64 from "../utils/imgConverter";
-import { toast } from "sonner";
 import { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
 
 //Changing API Key requires Development Server Restart
 const API_KEY = import.meta.env.VITE_API_KEY;
@@ -40,8 +40,6 @@ const generateImage = async ({
   setPrompt,
   setHistory,
 }: GenerateImageParams) => {
-  const toastId = toast.loading("Generating Image, Please wait...");
-
   try {
     const result = await query({
       inputs: prompt,
@@ -54,12 +52,9 @@ const generateImage = async ({
       { prompt, imageUrl: base64Image },
       ...prevHistory,
     ]);
-    toast.success("Image generated successfully!");
   } catch (err: any) {
     toast.error("Failed to generate image.");
     console.error(err.message);
-  } finally {
-    toast.dismiss(toastId);
   }
 };
 

diff --git a/src/components/ui/imgContainer.tsx b/src/components/ui/imgContainer.tsx
@@ -23,13 +23,27 @@ const ImageContainer = ({ imageSrc }: { imageSrc: string | null }) => {
     <div className="relative flex-1 flex aspect-square p-4 md:px-8 md:pt-6 md:pb-8 justify-center items-center">
       {imageSrc ? (
         <>
+          <div className="md:hidden flex flex-col gap-8 items-center justify-center ">
+            <img
+              src={imageSrc}
+              alt="Generated"
+              className="rounded-lg shadow-neutral-400 shadow-md drop-shadow-md max-w-full max-h-full object-contain"
+              onError={() => toast.error("Failed to load image.")}
+            />
+            <button
+              onClick={downloadImage}
+              className="block md:hidden w-full p-2 rounded-md shadow-neutral-400 shadow-md drop-shadow-md text-white bg-violet-900 hover:bg-violet-950"
+            >
+              Download
+            </button>
+          </div>
           <img
             src={imageSrc}
             alt="Generated"
-            className="rounded-lg shadow-neutral-400 shadow-md drop-shadow-md max-w-full max-h-full object-contain"
+            className="hidden md:block rounded-lg shadow-neutral-400 shadow-md drop-shadow-md max-w-full max-h-full object-contain"
             onError={() => toast.error("Failed to load image.")}
           />
-          <div className="absolute bottom-12 flex gap-4 items-center justify-center">
+          <div className="absolute bottom-12 hidden md:flex gap-4 items-center justify-center">
             <button
               onClick={downloadImage}
               className="bg-slate-200 text-green-600 p-3 rounded-full shadow-neutral-800 shadow-lg transition-all ease-linear hover:-translate-y-1"

diff --git a/src/utils/loadingPhrases.ts b/src/utils/loadingPhrases.ts
@@ -0,0 +1,24 @@
+const phrases = [
+  "Loading your magic...",
+  "Pixels are dusting...",
+  "Pixels are aligning...",
+  "Magic in the works...",
+  "Creativity brewing...",
+  "Working on your vision...",
+  "Magic in progress...",
+  "Creating masterpiece...",
+  "Just wait a moment...",
+  "Cooking up pixels...",
+  "Crafting your magic...",
+  "Vision unfolding...",
+  "Conjuring brilliance...",
+  "Sketching your idea...",
+  "Imagining the magic...",
+];
+
+const getRandomPhrase = () => {
+  const randomIndex = Math.floor(Math.random() * phrases.length);
+  return phrases[randomIndex];
+};
+
+export default getRandomPhrase;