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