feat: client side loading

components/Card.tsx

@@ -2,6 +2,7 @@ import { isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 import { GenericResource } from "@lib/types.ts";
 import { SmallRating } from "@components/Rating.tsx";
+import { Link } from "@islands/Link.tsx";
 
 export function Card(
   {
@@ -22,7 +23,7 @@ export function Card(
     rating?: number;
   },
 ) {
-  const backgroundStyle = {
+  const backgroundStyle: preact.JSX.CSSProperties = {
     backgroundSize: "cover",
     backgroundColor: backgroundColor,
   };
@@ -34,7 +35,7 @@ export function Card(
   }
 
   return (
-    <a
+    <Link
       href={link}
       style={backgroundStyle}
       data-thumb={thumbnail}
@@ -88,7 +89,7 @@ export function Card(
         )}
       </div>
       <div class="absolute inset-x-0 bottom-0 h-3/4" />
-    </a>
+    </Link>
   );
 }