53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { useEffect } from "preact/hooks";
|
|
|
|
declare global {
|
|
var loadingTimeout: ReturnType<typeof setTimeout> | undefined;
|
|
}
|
|
|
|
export function Link(
|
|
props: {
|
|
href?: string;
|
|
class?: string;
|
|
style?: preact.JSX.CSSProperties;
|
|
children: preact.ComponentChildren;
|
|
"data-thumb"?: string;
|
|
},
|
|
) {
|
|
const { href, children, class: _class, style } = props;
|
|
const thumbhash = props["data-thumb"];
|
|
function handleClick() {
|
|
if (globalThis.loadingTimeout) {
|
|
return;
|
|
}
|
|
globalThis.loadingTimeout = setTimeout(() => {
|
|
document.querySelector("main")?.classList.add("loading");
|
|
}, 100);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (globalThis.loadingTimeout) {
|
|
clearTimeout(globalThis.loadingTimeout);
|
|
delete globalThis.loadingTimeout;
|
|
setTimeout(() => {
|
|
globalThis.dispatchEvent(new CustomEvent("loading-finished"));
|
|
document.querySelector("main")?.classList.remove("loading");
|
|
}, 100);
|
|
} else {
|
|
globalThis.dispatchEvent(new CustomEvent("loading-finished"));
|
|
document.querySelector("main")?.classList.remove("loading");
|
|
}
|
|
});
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
style={style}
|
|
onClick={handleClick}
|
|
data-thumb={thumbhash}
|
|
class={_class}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|