feat(frontend): add 1px refetch indicator to Layout
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user