From d2072b47f27883d0bdb614b823ad3e1492898b86 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Wed, 23 Oct 2024 13:58:55 -0400
Subject: [PATCH] Add skeleton for Web Links

---
 .../components/search/WebLinkSkeleton.astro   | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 source/src/components/search/WebLinkSkeleton.astro

diff --git a/source/src/components/search/WebLinkSkeleton.astro b/source/src/components/search/WebLinkSkeleton.astro
new file mode 100644
index 0000000..6c8ff22
--- /dev/null
+++ b/source/src/components/search/WebLinkSkeleton.astro
@@ -0,0 +1,54 @@
+---
+// Properties
+const {
+    Title,
+    Description,
+    Link
+} = Astro.props
+---
+
+<div class="fade-up">
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+    <div class="search-result-web-skeleton"></div>
+</div>
+
+<style lang="scss">
+@keyframes wave-lines {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+@keyframes wave-squares {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+.fade-up {
+  mask-image: linear-gradient(white, transparent);
+}
+.search-result-web-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    background: white;
+    margin-bottom: 12px;
+    border-radius: 6px;
+    padding: 64px 12px;
+    box-shadow: 0px 4px 10px 0px #0000000a;
+    background: linear-gradient(to right,rgba(164, 164, 164, 0.2) 8%,rgba(241, 238, 238, 0.3) 18%,rgba(155, 155, 155, 0.2) 33%);
+    background-size: 1500px 1px;
+    animation: wave-lines 0.8s infinite ease-out;
+}
+</style>
\ No newline at end of file