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

avoid flashing scroll to bottom

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-03 08:46:54 -06:00
parent 1184aa9ad5
commit a71ca0852c
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,7 +179,7 @@ function Logs() {
// scroll to bottom // scroll to bottom
const [atBottom, setAtBottom] = useState(false); const [initialScroll, setInitialScroll] = useState(false);
const contentRef = useRef<HTMLDivElement | null>(null); const contentRef = useRef<HTMLDivElement | null>(null);
const [endVisible, setEndVisible] = useState(true); const [endVisible, setEndVisible] = useState(true);
@ -203,7 +203,7 @@ function Logs() {
(node: HTMLElement | null) => { (node: HTMLElement | null) => {
if (startObserver.current) startObserver.current.disconnect(); if (startObserver.current) startObserver.current.disconnect();
if (logs.length == 0 || !atBottom) { if (logs.length == 0 || !initialScroll) {
return; return;
} }
@ -242,16 +242,16 @@ function Logs() {
useEffect(() => { useEffect(() => {
if (logLines.length == 0) { if (logLines.length == 0) {
setAtBottom(false); setInitialScroll(false);
return; return;
} }
if (logLines.length < 100) { if (logLines.length < 100) {
setAtBottom(true); setInitialScroll(true);
return; return;
} }
if (atBottom) { if (initialScroll) {
return; return;
} }
@ -263,7 +263,7 @@ function Logs() {
top: contentRef.current?.scrollHeight, top: contentRef.current?.scrollHeight,
behavior: "instant", behavior: "instant",
}); });
setTimeout(() => setAtBottom(true), 300); setTimeout(() => setInitialScroll(true), 300);
// we need to listen on the current range of visible items // we need to listen on the current range of visible items
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [logLines, logService]); }, [logLines, logService]);
@ -306,7 +306,7 @@ function Logs() {
</div> </div>
</div> </div>
{!endVisible && ( {initialScroll && !endVisible && (
<Button <Button
className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white bg-gray-400 z-20 p-2" className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white bg-gray-400 z-20 p-2"
variant="secondary" variant="secondary"
@ -344,8 +344,8 @@ function Logs() {
idx >= logRange.start ? ( idx >= logRange.start ? (
<LogLineData <LogLineData
key={`${idx}-${logService}`} key={`${idx}-${logService}`}
startRef={idx == logRange.start ? startLogRef : undefined} startRef={idx == logRange.start + 10 ? startLogRef : undefined}
className={atBottom ? "" : "invisible"} className={initialScroll ? "" : "invisible"}
offset={idx} offset={idx}
line={logLines[idx - logRange.start]} line={logLines[idx - logRange.start]}
/> />