administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-18 17:14:26 +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

10
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,6 +460,9 @@ function Logs() {
</div> </div>
<div ref={lazyLogWrapperRef} className="size-full"> <div ref={lazyLogWrapperRef} className="size-full">
{isLoading ? (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
) : (
<EnhancedScrollFollow <EnhancedScrollFollow
startFollowing={true} startFollowing={true}
render={({ follow, onScroll }) => ( render={({ follow, onScroll }) => (
@ -472,6 +481,7 @@ function Logs() {
/> />
)} )}
/> />
)}
</div> </div>
</div> </div>
</div> </div>