From d97a9266242aa91238585c85c59fa92214d44d40 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sun, 18 May 2025 19:21:21 +0200
Subject: [PATCH] Improve

---
 public/diagonal-stripes.svg |  5 +++++
 src/App.tsx                 | 15 ++++++++------
 src/components/UrlForm.tsx  |  8 ++++++++
 src/components/UrlItem.tsx  | 41 ++++++++++++++++++++++---------------
 src/getDocument.ts          |  3 ++-
 src/index.css               | 12 +++++++++++
 src/transition.ts           |  6 ++++++
 7 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 public/diagonal-stripes.svg
 create mode 100644 src/transition.ts

diff --git a/public/diagonal-stripes.svg b/public/diagonal-stripes.svg
new file mode 100644
index 0000000..1237279
--- /dev/null
+++ b/public/diagonal-stripes.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg">
+    <!-- <path stroke="black" stroke-width="1" d="M0,40 L40,0 M20,0 L0,20 M40,20 L20,40" /> -->
+    <path stroke="currentColor" stroke-width="4" d="M0,0 L40,40 M20,0 L40,20 M0,20 L20,40" />
+</svg>
diff --git a/src/App.tsx b/src/App.tsx
index a4a4d9f..ced7b8f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { createEffect, createSignal, For } from "solid-js";
 import UrlForm from "./components/UrlForm";
 import UrlItem from "./components/UrlItem";
+import transition from "./transition";
 
 const URI_LIST = "text/uri-list";
 
@@ -53,13 +54,15 @@ export default function App() {
   function handleUrlSubmit(url: URL) {
     console.debug("Submitted url", url);
     //TODO use map to deduplicate and reduce garbage
-    setUrls((urls) => {
-      const index = urls.findIndex((otherUrl) => otherUrl.href === url.href);
+    transition(() => {
+      setUrls((urls) => {
+        const index = urls.findIndex((otherUrl) => otherUrl.href === url.href);
 
-      console.debug("Found url", index);
-      if (index !== -1) return urls;
+        console.debug("Found url", index);
+        if (index !== -1) return urls;
 
-      return [...urls, url];
+        return [...urls, url];
+      });
     });
   }
 
@@ -73,7 +76,7 @@ export default function App() {
       <h2 class="sr-only">Add Destination</h2>
       <UrlForm onSubmit={handleUrlSubmit} />
       <h2 class="sr-only">Destinations</h2>
-      <ul class="font-bold mt-4">
+      <ul class="font-bold mt-4 flex flex-wrap gap-2">
         <For each={urls()}>
           {(url) => (
             <li>
diff --git a/src/components/UrlForm.tsx b/src/components/UrlForm.tsx
index 4420bbf..45719b2 100644
--- a/src/components/UrlForm.tsx
+++ b/src/components/UrlForm.tsx
@@ -37,9 +37,15 @@ export default function UrlForm({ onSubmit }: UrlFormProperties) {
     if (!(input instanceof HTMLInputElement))
       throw new Error("Expected form to have url input");
 
+    console.debug("submitted", input.value);
     const url = URL.parse(input.value);
     if (url === null) {
       input.setCustomValidity("Invalid url. Url is not parsable.");
+      input.reportValidity();
+      // Reset on next input
+      input.addEventListener("input", () => input.setCustomValidity(""), {
+        once: true,
+      });
       return;
     }
 
@@ -57,7 +63,9 @@ export default function UrlForm({ onSubmit }: UrlFormProperties) {
       <input
         id="url"
         name={URL_INPUT}
+        type="url"
         required
+        autofocus
         class="border-4 rounded-full px-4 py-1.5 focus-visible:border-orange-500 focus:outline-none block grow row-start-2 "
       />
       <button
diff --git a/src/components/UrlItem.tsx b/src/components/UrlItem.tsx
index 2e9b6c9..47adfd9 100644
--- a/src/components/UrlItem.tsx
+++ b/src/components/UrlItem.tsx
@@ -1,27 +1,36 @@
-import { createResource, Suspense } from "solid-js";
+import { createResource } from "solid-js";
 import getDocument from "../getDocument";
 
 export default function UrlItem({ url }: { url: URL }) {
   const [document] = createResource(url, getDocument);
 
+  const title = () => document()?.title ?? url.hostname;
+  // classList={{
+  //   "relative  after:absolute after:inset-0 after:bg-[url(/public/diagonal-stripes.svg)] after:animate-stripes *:opacity-70 after:starting:opacity-0 after:transition-all after:transition-discrete after:duration-1000":
+  //     document.loading,
+  // }}
   return (
-    <Suspense fallback={<span>Loading...</span>}>
-      <a
-        href={url.href}
-        class="flex flex-col items-center justify-around min-w-0 max-w-max p-4 size-24 border-4 rounded-3xl focus-visible:border-orange-500 focus-visible:text-orange-500 focus:outline-none text-center align-middle content-center"
-      >
-        {/* <img
+    <a
+      href={url.href}
+      data-is-loading={document.loading || undefined}
+      class="group relative flex overflow-clip flex-col items-center justify-around p-4 size-28 border-4 rounded-3xl focus-visible:border-orange-500 focus-visible:text-orange-500 focus:outline-none text-center align-middle content-center data-is-loading:border-stone-400 "
+    >
+      {/* <img
                   src={`https://icons.duckduckgo.com/ip3/${destination.url.hostname}.ico`}
                   alt=""
                 /> */}
-        {/* Empty alt because it is purely decorative and should be skipped by screen readers */}
-        <img
-          src={`https://www.google.com/s2/favicons?sz=64&domain=${url.hostname}`}
-          alt=""
-          class="rounded-xl size-12"
-        />
-        <span>{document()?.title}</span>
-      </a>
-    </Suspense>
+      {/* Empty alt because it is purely decorative and should be skipped by screen readers */}
+      <img
+        src={`https://www.google.com/s2/favicons?sz=64&domain=${url.hostname}`}
+        alt=""
+        class="rounded-xl size-12"
+      />
+      <span>{title()}</span>
+
+      <div
+        data-name="stripes-animation"
+        class="hidden group-data-is-loading:block absolute inset-0 bg-[url(/public/diagonal-stripes.svg)] animate-stripes opacity-0 group-data-is-loading:opacity-100 text-stone-300 starting:opacity-0 transition-[display_opacity] duration-1000 transition-discrete"
+      />
+    </a>
   );
 }
diff --git a/src/getDocument.ts b/src/getDocument.ts
index fa4371a..4236aef 100644
--- a/src/getDocument.ts
+++ b/src/getDocument.ts
@@ -4,6 +4,7 @@ export default async function getDocument(url: URL) {
   // Do not care about status code. A bad request might still contain icon metadata
   const text = await response.text();
   const document = parser.parseFromString(text, "text/html");
-  await new Promise((resolve) => setTimeout(resolve, 1000));
+  await new Promise((resolve) => setTimeout(resolve, 3_000));
+  console.debug("Loaded", url);
   return document;
 }
diff --git a/src/index.css b/src/index.css
index 0cf85fc..44d8825 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,15 @@
 :root {
   @apply bg-stone-100 text-stone-900;
 }
+
+@theme {
+  --animate-stripes: stripes 5s linear infinite;
+  @keyframes stripes {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: 40px -40px;
+    }
+  }
+}
diff --git a/src/transition.ts b/src/transition.ts
new file mode 100644
index 0000000..dcf49db
--- /dev/null
+++ b/src/transition.ts
@@ -0,0 +1,6 @@
+// Check if startViewTransition is avialable once as it won't change
+const transition: (callback: () => void) => void = document.startViewTransition
+  ? (callback) => document.startViewTransition(callback)
+  : (callback) => callback();
+
+export default transition;
-- 
2.51.2