jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(components): fix loading screen logic and add delay to improve user experience

Browse source 
The loading screen was not working correctly due to incorrect logic. The variable `loadingScreen` was not being properly set to `false` when the data was loaded. This has been fixed by changing the condition in the JSX code from `isLoading` to `loadingScreen`.

Additionally, a delay of 600 milliseconds has been added to the loading screen using the `useEffect` hook. This delay gives the user a better visual experience by showing the loading screen for a short period of time before displaying the data.

These changes improve the user experience by providing a more accurate loading screen and a smoother transition when loading data.
This commit is contained in:
cristhianzl 2023-12-08 19:59:29 -03:00
commit 2ecadca58f
1 changed files with 10 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/frontend/src/pages/MainPage/components/components/index.tsx
View file

@ -20,6 +20,7 @@ export default function ComponentsComponent({
const { setErrorData, setSuccessData } = useContext(alertContext);
const [pageSize, setPageSize] = useState(10);
const [pageIndex, setPageIndex] = useState(1);
const [loadingScreen, setLoadingScreen] = useState(true);
const navigate = useNavigate();
@ -89,6 +90,12 @@ export default function ComponentsComponent({
setPageSize(10);
}
useEffect(() => {
setTimeout(() => {
setLoadingScreen(false);
}, 600);
}, []);
return (
<CardsWrapComponent
onFileDrop={onFileDrop}
@ -96,7 +103,7 @@ export default function ComponentsComponent({
>
<div className="flex h-full w-full flex-col justify-between">
<div className="flex w-full flex-col gap-4">
{!isLoading && data.length === 0 ? (
{!loadingScreen && data.length === 0 ? (
<div className="mt-6 flex w-full items-center justify-center text-center">
<div className="flex-max-width h-full flex-col">
<div className="flex w-full flex-col gap-4">
@ -125,7 +132,7 @@ export default function ComponentsComponent({
</div>
) : (
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
{!isLoading || data?.length > 0 ? (
{loadingScreen === false && data?.length > 0 ? (
data?.map((item, idx) => (
<CollectionCardComponent
onDelete={() => {
@ -171,7 +178,7 @@ export default function ComponentsComponent({
</div>
)}
</div>
{!isLoading && data.length > 0 && (
{!loadingScreen && data.length > 0 && (
<div className="relative py-6">
<PaginatorComponent
storeComponent={true}