From 3054c01f0f09e9aa59385366ac275baa069b022d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Hern=C3=A1ndez=20Alcojor?=
 <danielhal@ext.inditex.com>
Date: Thu, 11 Jul 2024 14:09:38 +0200
Subject: [PATCH] feat: Loading animation

---
 public/plane.svg                 |  1 +
 src/pages/admin/index.module.css | 13 +++++++++++++
 src/pages/admin/index.tsx        |  4 +++-
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 public/plane.svg
 create mode 100644 src/pages/admin/index.module.css

diff --git a/public/plane.svg b/public/plane.svg
new file mode 100644
index 0000000..63773b8
--- /dev/null
+++ b/public/plane.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.13em" height="1em" viewBox="0 0 576 512"><path fill="#d7192d" d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64H365.7L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1h-56.2c-10.6 0-18.3-10.2-15.4-20.4l49-171.6H112l-43.2 57.6c-3 4-7.8 6.4-12.8 6.4H14c-7.8 0-14-6.3-14-14c0-1.3.2-2.6.5-3.9L32 256L.5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14h42c5 0 9.8 2.4 12.8 6.4L112 192h102.9l-49-171.6c-3-10.2 4.7-20.4 15.3-20.4h56.2c11.5 0 22.1 6.2 27.8 16.1L365.7 192z"/></svg>
diff --git a/src/pages/admin/index.module.css b/src/pages/admin/index.module.css
new file mode 100644
index 0000000..eab5356
--- /dev/null
+++ 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
index e56298f..e31874a 100644
--- 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 && (