administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-18 09:04:28 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

add loading state

Browse Source
This commit is contained in:
Josh Hawkins 2025-01-15 15:22:05 -06:00
parent e90b39df73
commit f31964ccb8
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,6 +33,7 @@ function Logs() {
const [filterSeverity, setFilterSeverity] = useState<LogSeverity[]>(); const [filterSeverity, setFilterSeverity] = useState<LogSeverity[]>();
const [selectedLog, setSelectedLog] = useState<LogLine>(); const [selectedLog, setSelectedLog] = useState<LogLine>();
const lazyLogRef = useRef<LazyLog>(null); const lazyLogRef = useRef<LazyLog>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
document.title = `${logService[0].toUpperCase()}${logService.substring(1)} Logs - Frigate`; document.title = `${logService[0].toUpperCase()}${logService.substring(1)} Logs - Frigate`;
@ -69,6 +70,7 @@ function Logs() {
// fetchers // fetchers
const fetchInitialLogs = useCallback(async () => { const fetchInitialLogs = useCallback(async () => {
setIsLoading(true);
try { try {
const response = await axios.get(`logs/${logService}`); const response = await axios.get(`logs/${logService}`);
if ( if (
@ -85,6 +87,8 @@ function Logs() {
toast.error(`Error fetching logs: ${errorMessage}`, { toast.error(`Error fetching logs: ${errorMessage}`, {
position: "top-center", position: "top-center",
}); });
} finally {
setIsLoading(false);
} }
}, [logService, filterLines]); }, [logService, filterLines]);
@ -159,6 +163,8 @@ function Logs() {
}, [logService, filterSeverity]); }, [logService, filterSeverity]);
useEffect(() => { useEffect(() => {
setIsLoading(true);
setLogs([]);
fetchInitialLogs().then(() => { fetchInitialLogs().then(() => {
// Start streaming after initial load // Start streaming after initial load
setIsStreaming(true); setIsStreaming(true);
@ -454,24 +460,28 @@ function Logs() {
</div> </div>
<div ref={lazyLogWrapperRef} className="size-full"> <div ref={lazyLogWrapperRef} className="size-full">
<EnhancedScrollFollow {isLoading ? (
startFollowing={true} <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
render={({ follow, onScroll }) => ( ) : (
<LazyLog <EnhancedScrollFollow
ref={lazyLogRef} startFollowing={true}
enableLineNumbers={false} render={({ follow, onScroll }) => (
selectableLines <LazyLog
lineClassName="text-primary bg-background" ref={lazyLogRef}
highlightLineClassName="bg-primary/20" enableLineNumbers={false}
onRowClick={handleRowClick} selectableLines
formatPart={formatPart} lineClassName="text-primary bg-background"
text={logs.join("\n")} highlightLineClassName="bg-primary/20"
follow={follow} onRowClick={handleRowClick}
onScroll={onScroll} formatPart={formatPart}
loadingComponent={<ActivityIndicator />} text={logs.join("\n")}
/> follow={follow}
)} onScroll={onScroll}
/> loadingComponent={<ActivityIndicator />}
/>
)}
/>
)}
</div> </div>
</div> </div>
</div> </div>