administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add loading indicator to logs tab

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-14 09:34:04 -06:00
parent 9f099131ff
commit 34d7125e68
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/indicators/activity-indicator.tsx
View File

@ -1,9 +1,9 @@
import { LuLoader2 } from "react-icons/lu"; import { LuLoader2 } from "react-icons/lu";
export default function ActivityIndicator({ size = 30 }) { export default function ActivityIndicator({ className = "w-full", size = 30 }) {
return ( return (
<div <div
className="w-full flex items-center justify-center" className={`flex items-center justify-center ${className}`}
aria-label="Loading…" aria-label="Loading…"
> >
<LuLoader2 className="animate-spin" size={size} /> <LuLoader2 className="animate-spin" size={size} />

7
web/src/pages/Logs.tsx
View File

@ -11,6 +11,8 @@ import { FaCopy } from "react-icons/fa6";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { Skeleton } from "@/components/ui/skeleton";
import ActivityIndicator from "@/components/indicators/activity-indicator";
const logTypes = ["frigate", "go2rtc", "nginx"] as const; const logTypes = ["frigate", "go2rtc", "nginx"] as const;
type LogType = (typeof logTypes)[number]; type LogType = (typeof logTypes)[number];
@ -388,7 +390,7 @@ function Logs() {
</Button> </Button>
)} )}
<div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden"> <div className="relative size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden">
<div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary/40"> <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary/40">
<div className="p-1 flex items-center capitalize">Type</div> <div className="p-1 flex items-center capitalize">Type</div>
<div className="col-span-2 sm:col-span-1 flex items-center"> <div className="col-span-2 sm:col-span-1 flex items-center">
@ -443,6 +445,9 @@ function Logs() {
})} })}
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />} {logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
</div> </div>
{logLines.length == 0 && (
<ActivityIndicator className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2" />
)}
</div> </div>
</div> </div>
); );