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

Fix lag on components page

Browse source
This commit is contained in:
Lucas Oliveira 2023-12-04 17:10:32 -03:00
commit 15b7ce83d3
1 changed files with 26 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,45 +15,39 @@ export default function ComponentsComponent({
}: {
is_component?: boolean;
}) {
const { flows, removeFlow, uploadFlow, addFlow, isLoading, tabId } =
const { flows, removeFlow, uploadFlow, addFlow, isLoading } =
useContext(FlowsContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
const [pageSize, setPageSize] = useState(10);
const [pageIndex, setPageIndex] = useState(1);
const [allData, setAllData] = useState(flows);
const navigate = useNavigate();
useEffect(() => {
if (isLoading) return;
setAllData(
flows
.filter((f) => f.is_component === is_component)
.sort((a, b) => {
if (a?.updated_at && b?.updated_at) {
return (
new Date(b?.updated_at!).getTime() -
new Date(a?.updated_at!).getTime()
);
} else if (a?.updated_at && !b?.updated_at) {
return 1;
} else if (!a?.updated_at && b?.updated_at) {
return -1;
} else {
return (
new Date(b?.date_created!).getTime() -
new Date(a?.date_created!).getTime()
);
}
})
);
}, [flows]);
useEffect(() => {
const all = flows
.filter((f) => f.is_component === is_component)
.sort((a, b) => {
if (a?.updated_at && b?.updated_at) {
return (
new Date(b?.updated_at!).getTime() -
new Date(a?.updated_at!).getTime()
);
} else if (a?.updated_at && !b?.updated_at) {
return 1;
} else if (!a?.updated_at && b?.updated_at) {
return -1;
} else {
return (
new Date(b?.date_created!).getTime() -
new Date(a?.date_created!).getTime()
);
}
});
const start = (pageIndex - 1) * pageSize;
const end = start + pageSize;
setData(allData.slice(start, end));
}, [pageIndex, pageSize, allData]);
setData(all.slice(start, end));
}, [flows, pageIndex, pageSize]);
const [data, setData] = useState<FlowType[]>([]);
@ -93,7 +87,6 @@ export default function ComponentsComponent({
function resetFilter() {
setPageIndex(1);
setPageSize(10);
setAllData(flows);
}
return (
@ -178,14 +171,16 @@ export default function ComponentsComponent({
</div>
)}
</div>
{!isLoading && allData.length > 0 && (
{!isLoading && data.length > 0 && (
<div className="relative py-6">
<PaginatorComponent
storeComponent={true}
pageIndex={pageIndex}
pageSize={pageSize}
rowsCount={[10, 20, 50, 100]}
totalRowsCount={allData.length}
totalRowsCount={
flows.filter((f) => f.is_component === is_component).length
}
paginate={(pageSize, pageIndex) => {
setPageIndex(pageIndex);
setPageSize(pageSize);