csr tangled client in solid-js
add preloading to file nav
+32
-1
+3
-1
src/components/repo.tsx
+3
-1
src/components/repo.tsx
···
421
421
icon: JSX.Element;
422
422
lastCommit?: TreeEntry['last_commit'];
423
423
class?: string;
424
+
onMouseEnter?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
425
+
onMouseLeave?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
424
426
onClick?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
425
427
}> = (props) => (
426
-
<A href={props.href} class={clsx('untangled-file-row hover:underline', props.class)} onClick={props.onClick}>
428
+
<A href={props.href} class={clsx('untangled-file-row hover:underline', props.class)} onClick={props.onClick} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave}>
427
429
<div class="flex min-w-0 items-center gap-2">
428
430
{props.icon}
429
431
<span class="truncate">{props.name}</span>
+29
src/pages/repo/code.tsx
+29
src/pages/repo/code.tsx
···
655
655
const entryPath = joinPath(treePath, entry.name);
656
656
const directory = isDirectory(entry);
657
657
const href = directory ? treeHref(repo, treeRef, entryPath) : blobHref(repo, treeRef, entryPath);
658
+
const currentRef = effectiveRef();
659
+
660
+
let hoverTimer: ReturnType<typeof setTimeout> | undefined;
661
+
662
+
const handleMouseEnter = () => {
663
+
hoverTimer = setTimeout(() => {
664
+
if (!directory) {
665
+
queryClient.prefetchQuery({
666
+
queryKey: ['blob', repo.repoDid, treeRef, entryPath],
667
+
queryFn: () => getRepoBlob(repo, treeRef, entryPath),
668
+
});
669
+
return;
670
+
}
671
+
672
+
queryClient.prefetchQuery({
673
+
queryKey: ['repo-tree', repo.repoDid, currentRef, entryPath],
674
+
queryFn: async () => ({
675
+
tree: await getRepoTree(repo, currentRef!, entryPath),
676
+
path: entryPath,
677
+
ref: currentRef!,
678
+
}),
679
+
});
680
+
}, 30);
681
+
};
682
+
const handleMouseLeave = () => {
683
+
clearTimeout(hoverTimer);
684
+
};
658
685
659
686
return (
660
687
<OverviewFileRow
···
669
696
}
670
697
lastCommit={entry.last_commit}
671
698
class={pendingTreeHref() === href ? 'untangled-file-row-loading' : undefined}
699
+
onMouseEnter={handleMouseEnter}
700
+
onMouseLeave={handleMouseLeave}
672
701
onClick={(event) => {
673
702
if (directory) {
674
703
if (shouldAnimateNavigation(event)) {