diff --git a/components/Card.tsx b/components/Card.tsx
index d07faee..4e80707 100644
--- a/components/Card.tsx
+++ b/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 (
-
-
+
);
}
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 49f7a9e..3c388dd 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -57,6 +57,7 @@ import * as $KMenu_commands_create_recipe from "./islands/KMenu/commands/create_
import * as $KMenu_commands_create_recommendations from "./islands/KMenu/commands/create_recommendations.ts";
import * as $KMenu_commands_create_series from "./islands/KMenu/commands/create_series.ts";
import * as $KMenu_types from "./islands/KMenu/types.ts";
+import * as $Link from "./islands/Link.tsx";
import * as $Recommendations from "./islands/Recommendations.tsx";
import * as $Search from "./islands/Search.tsx";
import type { Manifest } from "$fresh/server.ts";
@@ -125,6 +126,7 @@ const manifest = {
$KMenu_commands_create_recommendations,
"./islands/KMenu/commands/create_series.ts": $KMenu_commands_create_series,
"./islands/KMenu/types.ts": $KMenu_types,
+ "./islands/Link.tsx": $Link,
"./islands/Recommendations.tsx": $Recommendations,
"./islands/Search.tsx": $Search,
},
diff --git a/islands/Link.tsx b/islands/Link.tsx
new file mode 100644
index 0000000..8109b41
--- /dev/null
+++ b/islands/Link.tsx
@@ -0,0 +1,42 @@
+import { useEffect } from "preact/hooks";
+
+declare global {
+ // deno-lint-ignore no-var
+ var loadingTimeout: ReturnType;
+}
+
+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 (
+
+ {children}
+
+ );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index eafd4f7..990d5bd 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -1,14 +1,15 @@
import { PageProps } from "$fresh/server.ts";
+import { Partial } from "$fresh/runtime.ts";
+import { useEffect } from "preact/hooks";
-import { Head } from "$fresh/runtime.ts";
export default function App({ Component }: PageProps) {
const globalCss = Deno
.readTextFileSync("./static/global.css")
.replaceAll("\n", "");
return (
- <>
-
+
+
Memorium
-
-
+
+
+
+
+
+
-
+
);
}
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
index 952b946..b4ba57e 100644
--- a/routes/_layout.tsx
+++ b/routes/_layout.tsx
@@ -1,5 +1,6 @@
import { PageProps } from "$fresh/server.ts";
import { resources } from "@lib/resources.ts";
+import { Link } from "@islands/Link.tsx";
import { Emoji } from "@components/Emoji.tsx";
export default function MyLayout({ Component }: PageProps) {
@@ -12,12 +13,12 @@ export default function MyLayout({ Component }: PageProps) {
diff --git a/routes/articles/index.tsx b/routes/articles/index.tsx
index c4489d1..10550b1 100644
--- a/routes/articles/index.tsx
+++ b/routes/articles/index.tsx
@@ -8,6 +8,7 @@ import { RedirectSearchHandler } from "@islands/Search.tsx";
import { parseResourceUrl, searchResource } from "@lib/search.ts";
import { GenericResource } from "@lib/types.ts";
import { ResourceCard } from "@components/Card.tsx";
+import { Link } from "@islands/Link.tsx";
export const handler: Handlers<
{ articles: Article[] | null; searchResults?: GenericResource[] }
@@ -35,13 +36,13 @@ export default function Greet(
searchResults={searchResults}
>
diff --git a/static/global.css b/static/global.css
index 7c34b1c..f5e1ddc 100644
--- a/static/global.css
+++ b/static/global.css
@@ -120,3 +120,11 @@ input[type=number] {
.list-decimal li::marker {
color: #8a898c;
}
+
+main {
+ transition: opacity 0.3s;
+}
+
+main.loading {
+ opacity: 0;
+}