feat: client side loading

islands/Link.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "preact/hooks";
+
+declare global {
+  // deno-lint-ignore no-var
+  var loadingTimeout: ReturnType<typeof setTimeout>;
+}
+
+export function Link(
+  { href, children, class: _class, style }: {
+    href?: string;
+    class?: string;
+    style?: preact.JSX.CSSProperties;
+    children: preact.ComponentChildren;
+  },
+) {
+  function handleClick() {
+    if (globalThis.loadingTimeout) {
+      return;
+    }
+    globalThis.loadingTimeout = setTimeout(() => {
+      document.querySelector("main")?.classList.add("loading");
+    }, 100);
+  }
+
+  useEffect(() => {
+    clearTimeout(globalThis.loadingTimeout);
+    setTimeout(() => {
+      document.querySelector("main")?.classList.remove("loading");
+    }, 100);
+  });
+
+  return (
+    <a
+      href={href}
+      style={style}
+      onClick={handleClick}
+      class={_class}
+    >
+      {children}
+    </a>
+  );
+}