MLE: Fix Loading Message
This commit is contained in:
parent
ac0d43d291
commit
c2e205310a
2 changed files with 11 additions and 9 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue