- {filteredRecords.map((bucket, index) => {
- return (
-
- );
- })}
+ {filteredRecords.length !== 0 && (
+
+ )}
{filteredRecords.length === 0 && filterBuckets !== "" && (
.
+
+import React, { Fragment, ReactElement, useState } from "react";
+import { FixedSizeList as List } from "react-window";
+import InfiniteLoader from "react-window-infinite-loader";
+import { AutoSizer } from "react-virtualized";
+
+interface IVirtualizedList {
+ rowRenderFunction: (index: number) => ReactElement | null;
+ totalItems: number;
+ defaultHeight?: number;
+}
+
+let itemStatusMap: any = {};
+const LOADING = 1;
+const LOADED = 2;
+
+const VirtualizedList = ({
+ rowRenderFunction,
+ totalItems,
+ defaultHeight,
+}: IVirtualizedList) => {
+ const isItemLoaded = (index: any) => !!itemStatusMap[index];
+
+ const loadMoreItems = (startIndex: number, stopIndex: number) => {
+ for (let index = startIndex; index <= stopIndex; index++) {
+ itemStatusMap[index] = LOADING;
+ }
+
+ for (let index = startIndex; index <= stopIndex; index++) {
+ itemStatusMap[index] = LOADED;
+ }
+ };
+
+ const RenderItemLine = ({ index, style }: any) => {
+ return {rowRenderFunction(index)}
;
+ };
+
+ return (
+
+
+ {({ onItemsRendered, ref }) => (
+
+ {({ width, height }) => {
+ return (
+
+ {RenderItemLine}
+
+ );
+ }}
+
+ )}
+
+
+ );
+};
+
+export default VirtualizedList;
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index e86c50e59..785289afa 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -45,6 +45,8 @@ import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
import AButton from "../../Common/AButton/AButton";
import withSuspense from "../../Common/Components/withSuspense";
+import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
+import BucketListItem from "../../Buckets/ListBuckets/BucketListItem";
const CredentialsPrompt = withSuspense(
React.lazy(() => import("../../Common/CredentialsPrompt/CredentialsPrompt"))
@@ -94,6 +96,10 @@ const styles = (theme: Theme) =>
textAlign: "right",
marginBottom: 8,
},
+ tenantsList: {
+ marginTop: 25,
+ height: "calc(100vh - 195px)",
+ },
});
const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
@@ -158,6 +164,16 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
setIsLoading(true);
}, []);
+ const renderItemLine = (index: number) => {
+ const tenant = filteredRecords[index] || null;
+
+ if (tenant) {
+ return ;
+ }
+
+ return null;
+ };
+
return (
{showNewCredentials && (
@@ -259,13 +275,16 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
-