feat(frontend): add 1px refetch indicator to Layout
This commit is contained in:
@@ -1,9 +1,32 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { useIsFetching } from "@tanstack/react-query";
|
||||
import { Sidebar } from "./Sidebar";
|
||||
|
||||
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 (
|
||||
<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 />
|
||||
<main className="md:pl-60">
|
||||
<div className="mx-auto max-w-[1400px] px-8 py-10">
|
||||
|
||||
Reference in New Issue
Block a user