MLE: Fix Loading Message

This commit is contained in:
thororen1234 2026-07-23 01:19:59 -04:00
parent ac0d43d291
commit c2e205310a
No known key found for this signature in database
2 changed files with 11 additions and 9 deletions

View file

@ -165,10 +165,10 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
modalProps.transitionState === 1 && modalProps.transitionState === 1 &&
<div> <div>
{pending && ( {pending && (
<LoadingLogs /> <LoadingLogs tab={currentTab} />
)} )}
{messages != null && total === 0 && ( {!pending && messages != null && total === 0 && (
<EmptyLogs <EmptyLogs
hasQuery={queryEh.length !== 0} hasQuery={queryEh.length !== 0}
reset={reset} reset={reset}
@ -292,13 +292,13 @@ function EmptyLogs({ hasQuery, reset: forceUpdate }: { hasQuery: boolean; reset:
); );
} }
function LoadingLogs() { function LoadingLogs(tab) {
return ( return (
<div className={cl("modal-empty-logs", "modal-content-inner")} style={{ textAlign: "center" }}> <div className={cl("modal-empty-logs", "modal-content-inner")} style={{ textAlign: "center" }}>
<Flex flexDirection="column" style={{ position: "relative" }}> <Flex flexDirection="column" style={{ position: "relative" }}>
<BaseText size="lg"> <BaseText size="lg">
Loading Logs... Loading {tab} Logs...
</BaseText> </BaseText>
</Flex> </Flex>
</div> </div>

View file

@ -33,6 +33,7 @@ export function useMessages(query: string, currentTab: LogTabs, sortNewest: bool
const [messages, setMessages] = useState<DBMessageRecord[]>([]); const [messages, setMessages] = useState<DBMessageRecord[]>([]);
const [statusTotal, setStatusTotal] = useState<number>(0); const [statusTotal, setStatusTotal] = useState<number>(0);
const [total, setTotal] = useState<number>(0); const [total, setTotal] = useState<number>(0);
const [resetCounter, setResetCounter] = useState(0);
const debouncedQuery = useDebouncedValue(query, 300); const debouncedQuery = useDebouncedValue(query, 300);
@ -41,6 +42,8 @@ export function useMessages(query: string, currentTab: LogTabs, sortNewest: bool
}, [pending]); }, [pending]);
useEffect(() => { useEffect(() => {
setPending(true);
let isMounted = true; let isMounted = true;
const loadMessages = async () => { const loadMessages = async () => {
@ -55,9 +58,8 @@ export function useMessages(query: string, currentTab: LogTabs, sortNewest: bool
if (isMounted) { if (isMounted) {
setMessages(messages); setMessages(messages);
setStatusTotal(statusTotal); setStatusTotal(statusTotal);
setPending(false);
} }
setPending(false);
} else { } else {
const allMessages = await getDateStortedMessagesByStatusIDB(sortNewest, Number.MAX_SAFE_INTEGER, status); const allMessages = await getDateStortedMessagesByStatusIDB(sortNewest, Number.MAX_SAFE_INTEGER, status);
const { queries, rest } = tokenizeQuery(debouncedQuery); const { queries, rest } = tokenizeQuery(debouncedQuery);
@ -78,8 +80,8 @@ export function useMessages(query: string, currentTab: LogTabs, sortNewest: bool
if (isMounted) { if (isMounted) {
setMessages(filteredMessages); setMessages(filteredMessages);
setStatusTotal(Number.MAX_SAFE_INTEGER); setStatusTotal(Number.MAX_SAFE_INTEGER);
setPending(false);
} }
setPending(false);
} }
}; };
@ -89,9 +91,9 @@ export function useMessages(query: string, currentTab: LogTabs, sortNewest: bool
isMounted = false; isMounted = false;
}; };
}, [debouncedQuery, sortNewest, numDisplayedMessages, currentTab, pending]); }, [debouncedQuery, sortNewest, numDisplayedMessages, currentTab, resetCounter]);
return { messages, statusTotal, total, pending, reset: () => setPending(true) }; return { messages, statusTotal, total, pending, reset: () => setResetCounter(c => c + 1) };
} }
function getStatus(currentTab: LogTabs) { function getStatus(currentTab: LogTabs) {