memorium/islands/Link.tsx

43 lines
875 B
TypeScript

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>
);
}