feat: Loading animation

wizeline · Jul 11, 2024 · 3054c01 · 3054c01
1 parent 7191e65
commit 3054c01
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/public/plane.svg b/public/plane.svg
diff --git a/src/pages/admin/index.module.css b/src/pages/admin/index.module.css
@@ -0,0 +1,13 @@
+.loading {
+    animation: loading-plane 5s infinite;
+}
+
+@keyframes loading-plane {
+    from {
+        transform: translateX(0);
+    }
+
+    to {
+        transform: translateX(calc(1200px - 1em));
+    }
+}
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
@@ -4,6 +4,7 @@ import { FormEvent, useEffect, useState } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 import { LocalStorageImgUrls, Profile } from '@/types';
 import { addUrl } from '@/utils';
+import styles from './index.module.css';
 
 function getPrompt(profileKey: Profile, destination: string): string {
   const profile = PROFILES[profileKey];
@@ -110,8 +111,9 @@ const AdminPage = () => {
         </form>
         <div className="mt-4">
           {loading && (
-            <div className="text-center">
+            <div className="text-center loading-image">
               <p>Generando imagen...</p>
+              <img className={styles.loading} src="/plane.svg" alt="Avión" />
             </div>
           )}
           {generatedImgUrl && (