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

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

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