Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

add loading state for fetching

Browse source
This commit is contained in:
Daniel Avila 2023-03-18 15:59:59 -04:00
parent b97594c000
commit da42d6272a
3 changed files with 25 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Nav/NavLinks.jsx
View file

@ -6,10 +6,10 @@ import ClearConvos from './ClearConvos';
import DarkMode from './DarkMode'; import DarkMode from './DarkMode';
import Logout from './Logout'; import Logout from './Logout';
export default function NavLinks({ onSearchSuccess, clearSearch }) { export default function NavLinks({ fetch, onSearchSuccess, clearSearch }) {
return ( return (
<> <>
<SearchBar onSuccess={onSearchSuccess} clearSearch={clearSearch}/> <SearchBar fetch={fetch} onSuccess={onSearchSuccess} clearSearch={clearSearch}/>
<ClearConvos /> <ClearConvos />
<DarkMode /> <DarkMode />
<Logout /> <Logout />

15
client/src/components/Nav/SearchBar.jsx
View file

@ -6,13 +6,13 @@ import { setQuery } from '~/store/searchSlice';
import { setConvos, refreshConversation } from '~/store/convoSlice'; import { setConvos, refreshConversation } from '~/store/convoSlice';
import axios from 'axios'; import axios from 'axios';
const fetch = async (q, pageNumber, callback) => { // const fetch = async (q, pageNumber, callback) => {
const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`); // const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
console.log(data); // console.log(data);
callback(data); // callback(data);
}; // };
export default function SearchBar({ onSuccess, clearSearch }) { export default function SearchBar({ fetch, onSuccess, clearSearch }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
@ -27,7 +27,8 @@ export default function SearchBar({ onSuccess, clearSearch }) {
debounce((q) => { debounce((q) => {
dispatch(setQuery(q)); dispatch(setQuery(q));
if (q.length > 0) { if (q.length > 0) {
fetch(q, 1, onSuccess); // fetch(q, 1, onSuccess);
fetch(q, 1);
} }
}, 750), }, 750),
[dispatch] [dispatch]

24
client/src/components/Nav/index.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef, useCallback } from 'react';
import axios from 'axios'; import axios from 'axios';
import _ from 'lodash'; import _ from 'lodash';
import NewChat from './NewChat'; import NewChat from './NewChat';
@ -10,7 +10,8 @@ import { swr } from '~/utils/fetchers';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { setConvos, refreshConversation } from '~/store/convoSlice'; import { setConvos, refreshConversation } from '~/store/convoSlice';
const fetch = async (q, pageNumber, callback) => { const fetcher = async (pre, q, pageNumber, callback) => {
pre();
const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`); const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
console.log(data); console.log(data);
callback(data); callback(data);
@ -19,10 +20,12 @@ const fetch = async (q, pageNumber, callback) => {
export default function Nav({ navVisible, setNavVisible }) { export default function Nav({ navVisible, setNavVisible }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
const [isFetching, setIsFetching] = useState(false);
const [pages, setPages] = useState(1); const [pages, setPages] = useState(1);
const [pageNumber, setPage] = useState(1); const [pageNumber, setPage] = useState(1);
const { search, query } = useSelector((state) => state.search); const { search, query } = useSelector((state) => state.search);
const { conversationId, convos, refreshConvoHint } = useSelector((state) => state.convo); const { conversationId, convos, refreshConvoHint } = useSelector((state) => state.convo);
const onSuccess = (data, searchFetch = false) => { const onSuccess = (data, searchFetch = false) => {
if (search) { if (search) {
return; return;
@ -45,8 +48,11 @@ export default function Nav({ navVisible, setNavVisible }) {
} }
setPage(res.pageNumber); setPage(res.pageNumber);
setPages(res.pages); setPages(res.pages);
setIsFetching(false);
}; };
const fetch = useCallback(_.partialRight(fetcher.bind(null, () => setIsFetching(true)), onSearchSuccess), [dispatch]);
const clearSearch = () => { const clearSearch = () => {
setPage(1); setPage(1);
dispatch(refreshConversation()); dispatch(refreshConversation());
@ -54,10 +60,6 @@ export default function Nav({ navVisible, setNavVisible }) {
const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, { const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, {
revalidateOnMount: false, revalidateOnMount: false,
// populateCache: false,
// revalidateIfStale: false,
// revalidateOnFocus: false,
// revalidateOnReconnect : false,
}); });
const containerRef = useRef(null); const containerRef = useRef(null);
@ -77,7 +79,8 @@ export default function Nav({ navVisible, setNavVisible }) {
setPage((prev) => prev + 1); setPage((prev) => prev + 1);
await mutate(); await mutate();
} else { } else {
await fetch(query, +pageNumber + 1, _.partialRight(onSearchSuccess, +pageNumber + 1)); // await fetch(query, +pageNumber + 1, onSearchSuccess);
await fetch(query, +pageNumber + 1);
} }
}; };
@ -88,7 +91,8 @@ export default function Nav({ navVisible, setNavVisible }) {
setPage((prev) => prev - 1); setPage((prev) => prev - 1);
await mutate(); await mutate();
} else { } else {
await fetch(query, +pageNumber - 1, _.partialRight(onSearchSuccess, +pageNumber - 1)); // await fetch(query, +pageNumber - 1, onSearchSuccess);
await fetch(query, +pageNumber - 1);
} }
}; };
@ -145,7 +149,8 @@ export default function Nav({ navVisible, setNavVisible }) {
ref={containerRef} ref={containerRef}
> >
<div className={containerClasses}> <div className={containerClasses}>
{isLoading && (pageNumber === 1 || search) ? ( {/* {(isLoading && pageNumber === 1) ? ( */}
{(isLoading && pageNumber === 1) || (isFetching) ? (
<Spinner /> <Spinner />
) : ( ) : (
<Conversations <Conversations
@ -163,6 +168,7 @@ export default function Nav({ navVisible, setNavVisible }) {
</div> </div>
</div> </div>
<NavLinks <NavLinks
fetch={fetch}
onSearchSuccess={onSearchSuccess} onSearchSuccess={onSearchSuccess}
clearSearch={clearSearch} clearSearch={clearSearch}
/> />