Fixed error y haciendo el spinner global

Author: igrisdev

astro.config.mjs

@@ -11,5 +11,5 @@ import vercel from '@astrojs/vercel/serverless'
 export default defineConfig({
   integrations: [tailwind(), react()],
   output: 'server',
-  adapter: vercel(),
+  adapter: vercel({}),
 })

src/components/general/Spinner.astro

@@ -0,0 +1,44 @@
+<span class="loader"></span>
+
+<style>
+  .loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite;
+  }
+  .loader::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #fff;
+    animation: prixClipFix 2s linear infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes prixClipFix {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+    }
+  }
+</style>

src/components/home/components/GenericContainerCompare.astro

@@ -1,13 +1,22 @@
+---
+import Spinner from '@components/general/Spinner.astro'
+---
+
 <div class="container-compare">
   <div
     class="relative bg-gray-400 w-full h-full aspect-video overflow-hidden grid place-content-center"
   >
-    <span class="loader"></span>
+    <Spinner />
+  </div>
+  <div
+    class="relative bg-gray-400 w-full h-full aspect-video overflow-hidden grid place-content-center"
+  >
+    <Spinner />
   </div>
   <div
     class="relative bg-gray-400 w-full h-full aspect-video overflow-hidden grid place-content-center"
   >
-    <span class="loader"></span>
+    <Spinner />
   </div>
 </div>
 
@@ -18,45 +27,4 @@
     gap: 1rem;
     min-height: 400px;
   }
-
-  .loader {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    position: relative;
-    animation: rotate 1s linear infinite;
-  }
-  .loader::before {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    inset: 0px;
-    border-radius: 50%;
-    border: 5px solid #fff;
-    animation: prixClipFix 2s linear infinite;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes prixClipFix {
-    0% {
-      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-    }
-    25% {
-      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-    }
-    50% {
-      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-    }
-    75% {
-      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-    }
-    100% {
-      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-    }
-  }
 </style>