feat: change url and add skeleton object while loading

.env

@@ -1,4 +1,4 @@
 VITE_DEV_NAME =  wk18k
-VITE_URL_API = https://fast-apiimggen.etwg34dassad211.repl.co/image
-VITE_URL_GENERATE = https://fast-apiimggen.etwg34dassad211.repl.co/generate-image
-VITE_URL_STATUS_ERR = https://fast-apiimggen.etwg34dassad211.repl.co/status-error
+VITE_URL_API = https://99d6b332-c3c0-4af8-a69b-2d9e22b0605f-00-1q2p73pdnjzlr.worf.replit.dev/image
+VITE_URL_GENERATE = https://99d6b332-c3c0-4af8-a69b-2d9e22b0605f-00-1q2p73pdnjzlr.worf.replit.dev/generate-image
+VITE_URL_STATUS_ERR = https://99d6b332-c3c0-4af8-a69b-2d9e22b0605f-00-1q2p73pdnjzlr.worf.replit.dev/status-error

readme.md

@@ -80,6 +80,7 @@ npm run build
 
 # Changelog
 
+- v1.2.1 change url and add skeleton object while loading
 - v1.2.0 add counter page and add star it on github
 - v1.1.9 change icon twitter to X
 - v1.1.8 add button copy image

src/App.tsx

@@ -6,6 +6,7 @@ import image_logo_1 from "@/assets/image_logo_1.png";
 import image_logo_2 from "@/assets/image_logo_2.png";
 import ImageShow from "./components/ImageShow/ImageShow.tsx";
 import TextPrompt from "./components/TextPrompt/TextPrompt.tsx";
+import Skeleton from "./components/CardImage/Skeleton.tsx";
 import CardImage from "./components/CardImage/CardImage.tsx";
 import Footer from "./components/Footer/Footer.tsx";
 import Navbar from "./components/Navbar/Navbar.tsx";
@@ -83,18 +84,9 @@ export default function App() {
             status_gen={data.status_gen}
             status_erro={data.status_erro}
           />
+
           {data.status_gen === false ? (
-            <div className="grid grid-cols-1 gap-2 place-items-center p-10 md:p-32">
-              <Spinner className="h-10 w-10 md:h-20 md:w-20 mr-3" />
-              <p className="text-center text-xl animate-pulse">
-                {t("loading")}
-              </p>
-              <Progress
-                value={value}
-                className="w-60 md:w-1/2 "
-                variant="gradient"
-              />
-            </div>
+            <Skeleton />
           ) : (
             <CardImage
               text={data.prompt_text}

src/components/CardImage/CardImage.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export default function CardImage({ urls, text, thumbnails }: Props) {
   const CardElements = urls.map((url: string, index: number) => {
-    return index != 4 ? (
+    return index != 3 ? (
       <Card
         key={index}
         url={url}

src/components/CardImage/Skeleton.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from "react-i18next";
+
+const Skeleton = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <p className="text-center text-xl animate-pulse">{t("loading")}</p>
+      <div className="flex justify-center">
+        <div className="grid grid-cols-1 m-4 md:grid-cols-1 xl:grid-cols-2 gap-6 lg:gap-5">
+          <div className="flex flex-col gap-4 w-80 md:w-96 my-6">
+            <div className="skeleton h-72 w-full"></div>
+            <div className="skeleton h-4 w-28"></div>
+            <div className="skeleton h-4 w-full"></div>
+            <div className="skeleton h-4 w-full"></div>
+          </div>
+          <div className="flex flex-col gap-4 w-80 md:w-96 my-6">
+            <div className="skeleton h-72 w-full"></div>
+            <div className="skeleton h-4 w-28"></div>
+            <div className="skeleton h-4 w-full"></div>
+            <div className="skeleton h-4 w-full"></div>
+          </div>
+          <div className="flex flex-col gap-4 w-80 md:w-96 my-6">
+            <div className="skeleton h-72 w-full"></div>
+            <div className="skeleton h-4 w-28"></div>
+            <div className="skeleton h-4 w-full"></div>
+            <div className="skeleton h-4 w-full"></div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Skeleton;