feat(frontend): add 1px refetch indicator to Layout

This commit is contained in:
Tyler
2026-06-19 19:39:33 -06:00
parent 6af787614e
commit 585548e046
+23
View File
@@ -1,9 +1,32 @@
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import { useIsFetching } from "@tanstack/react-query";
import { Sidebar } from "./Sidebar"; import { Sidebar } from "./Sidebar";
export function Layout() { export function Layout() {
// useIsFetching() returns the number of in-flight queries and is 0 on
// first load (queries that have not yet fired are not counted). We use it
// to drive a 1px hairline scan element at the very top of the layout.
const isFetching = useIsFetching();
const showScan = isFetching > 0;
return ( return (
<div className="relative min-h-screen z-10"> <div className="relative min-h-screen z-10">
{/*
Scan element — always in the DOM (no layout shift), 1px tall, full
width. pointer-events-none so it never blocks clicks. The inner
bar uses the `scan` keyframe from tailwind.config to slide a 1/3-
width electric-blue bar across the hairline.
*/}
<div
className="fixed top-0 left-0 right-0 z-50 h-px overflow-hidden pointer-events-none transition-opacity duration-200"
style={{ opacity: showScan ? 1 : 0 }}
aria-hidden
>
<div
className="h-full w-1/3 bg-accent animate-scan"
style={{ boxShadow: "0 0 8px hsl(var(--accent) / 0.5)" }}
/>
</div>
<Sidebar /> <Sidebar />
<main className="md:pl-60"> <main className="md:pl-60">
<div className="mx-auto max-w-[1400px] px-8 py-10"> <div className="mx-auto max-w-[1400px] px-8 py-10">