From df07435874bdb39fd2be244f3338d3e8b4aed92f Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Wed, 23 Oct 2024 14:00:21 -0400
Subject: [PATCH] Add skeleton animation, adjust query text, and use default
 API link from ENV

---
 source/src/pages/web.astro | 69 ++++++++++++++++++++++++++++++++++----
 1 file changed, 62 insertions(+), 7 deletions(-)

diff --git a/source/src/pages/web.astro b/source/src/pages/web.astro
index 85a261a..046a0f4 100644
--- a/source/src/pages/web.astro
+++ b/source/src/pages/web.astro
@@ -2,30 +2,85 @@
 // Layout
 import Search from "@layouts/Search.astro";
 
+// Configuration
+import {
+  DEFAULT_API
+} from "@utils/GetConfig"
+
 // Components
-import WebLink from "@components/search/WebLink.astro";
 import RelatedSearches from "@components/search/RelatedSearches.astro";
+import WebLink from "@components/search/WebLink.astro";
+import WebLinkSkeleton from "@components/search/WebLinkSkeleton.astro";
 
 // Fetch
-const QueryText = Astro.url.href.split("web?=").pop()
-const Query = await fetch("https://4get.sudovanilla.org" + "/api/v1/web?s=" + QueryText).then((response) => response.json());
+const QueryString = Astro.url.href.split("web?=").pop() // Get user's search query from URL
+const QueryText = `${QueryString}`.replaceAll("%20", " ") // Replace "%20" with a space
+const Query = await fetch(DEFAULT_API + "/api/v1/web?s=" + QueryString).then((response) => response.json()); // Response
 ---
 
-<Search Query={QueryText} Type="Web">
+<Search QueryText={QueryText} Type="Web">
     <slot slot="search">
         {Query.web.map((query) => (
             <WebLink
+                server:defer
                 Title={query.title}
                 Description={query.description}
                 Link={query.url}
-            />
+            >
+                <WebLinkSkeleton slot="fallback"/>
+            </WebLink>
         ))}
     </slot>
     <slot slot="rich-panel">
-        <RelatedSearches>
+        <RelatedSearches server:defer>
             {Query.related.map((related) => (
                 <a href={'/web?=' + related}>{related}</a>
             ))}
+            <slot slot="fallback">
+                <div class="fade-up small-grid-related">
+                    <a class="related-sk"></a>
+                    <a class="related-sk"></a>
+                    <a class="related-sk"></a>
+                    <a class="related-sk"></a>
+                    <a class="related-sk"></a>
+                </div>
+            </slot>
         </RelatedSearches>
+        <a style="font-size: 12px;" href={DEFAULT_API + "/api/v1/web?s=" + QueryString} target="_blank">JSON Response</a>
     </slot>
-</Search>
\ No newline at end of file
+</Search>
+
+<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;
+  }
+}
+.small-grid-related {
+    display: flex;
+    flex-wrap: wrap;
+}
+.fade-up {
+  mask-image: linear-gradient(white, transparent);
+}
+.related-sk {
+    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: 150px 1px;
+    animation: wave-lines 10s infinite ease-out;
+    padding: 12px 64px;
+    margin-bottom: 6px;
+    margin-right: 6px;
+}
+</style>
\ No newline at end of file