From 52a7fabaeb767040aa17833e3eaa444620e85e03 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 23 Oct 2024 03:31:40 +0530
Subject: [PATCH] Fix empty placeholder showing during loading

---
 .../components/tenant-grid.tsx                | 25 ++-----------------
 .../with-tenant-grid-placeholders.tsx         |  2 +-
 2 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/features/admin.tenants.v1/components/tenant-grid.tsx b/features/admin.tenants.v1/components/tenant-grid.tsx
index 9686d4ed905..cd602a4a55e 100644
--- a/features/admin.tenants.v1/components/tenant-grid.tsx
+++ b/features/admin.tenants.v1/components/tenant-grid.tsx
@@ -21,7 +21,7 @@ import CircularProgress from "@oxygen-ui/react/CircularProgress";
 import Grid from "@oxygen-ui/react/Grid";
 import Typography from "@oxygen-ui/react/Typography";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import InfiniteScroll from "react-infinite-scroll-component";
 import TenantCard from "./tenant-card";
@@ -57,18 +57,10 @@ const TenantGrid: FunctionComponent<TenantGridProps> = ({
         isInitialRenderingComplete
     } = useTenants();
 
-    const [ hasMore, setHasMore ] = useState<boolean>(true);
-
     /**
      * Handles the load more action in the infinite scroll component.
      */
     const handleLoadMore = (): void => {
-        if (tenantList?.totalResults && tenantListLimit >= tenantList.totalResults) {
-            setHasMore(false);
-
-            return;
-        }
-
         setTenantListLimit((prevLimit: number) => prevLimit + 10);
     };
 
@@ -90,20 +82,7 @@ const TenantGrid: FunctionComponent<TenantGridProps> = ({
                 dataLength={ tenantList?.totalResults ?? 0 }
                 next={ handleLoadMore }
                 hasMore={ resolveHasMore() }
-                loader={
-                    (<Box
-                        display="flex"
-                        alignContent="center"
-                        alignItems="center"
-                        justifyContent="center"
-                        flexDirection="column"
-                        gap={ 2 }
-                        className="infinite-loader"
-                    >
-                        <CircularProgress size={ 22 } className="tenant-list-item-loader" />
-                        <Typography variant="h6">{ t("common:loading") }...</Typography>
-                    </Box>)
-                }
+                loader={ null }
                 endMessage={ null }
             >
                 <WithTenantGridPlaceholders
diff --git a/features/admin.tenants.v1/components/with-tenant-grid-placeholders.tsx b/features/admin.tenants.v1/components/with-tenant-grid-placeholders.tsx
index af551f42eab..9e35a89a959 100644
--- a/features/admin.tenants.v1/components/with-tenant-grid-placeholders.tsx
+++ b/features/admin.tenants.v1/components/with-tenant-grid-placeholders.tsx
@@ -141,7 +141,7 @@ const WithTenantGridPlaceholders: FunctionComponent<WithTenantGridPlaceholdersPr
         />
     );
 
-    if (!isInitialRenderingComplete && isTenantListLoading) {
+    if (isTenantListLoading) {
         return (
             <Grid container spacing={ 3 } data-componentid={ componentId }>
                 { renderLoadingPlaceholder() }