From 72c7ffee13232da877731d1ddc8d4dea7db2ef6a Mon Sep 17 00:00:00 2001
From: Harsh Vador <58542468+harsh-vador@users.noreply.github.com>
Date: Mon, 27 Jun 2022 21:03:01 +0530
Subject: [PATCH] (refactor): loader glitch (#5660)

* (refactor): loader glitch

* (refactor): Code improvement
---
 .../pages/explore/ExplorePage.component.tsx   | 81 ++++++++-----------
 1 file changed, 34 insertions(+), 47 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
index fa63721047b..e80a62e15c1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
@@ -35,7 +35,6 @@ import {
   ExploreSearchData,
   UrlParams,
 } from '../../components/Explore/explore.interface';
-import Loader from '../../components/Loader/Loader';
 import { getExplorePathWithSearch, PAGE_SIZE } from '../../constants/constants';
 import {
   emptyValue,
@@ -66,8 +65,6 @@ const ExplorePage: FunctionComponent = () => {
     () => getQueryParam(getSearchFilter(location.search)),
     [location.search]
   );
-  const [isLoading, setIsLoading] = useState(true);
-  const [isLoadingForData, setIsLoadingForData] = useState(true);
   const [error, setError] = useState<string>('');
   const { searchQuery, tab } = useParams<UrlParams>();
   const [searchText, setSearchText] = useState<string>(searchQuery || '');
@@ -209,9 +206,6 @@ const ExplorePage: FunctionComponent = () => {
           err,
           jsonData['api-error-messages']['fetch-entity-count-error']
         );
-      })
-      .finally(() => {
-        setIsLoading(false);
       });
   };
 
@@ -250,12 +244,10 @@ const ExplorePage: FunctionComponent = () => {
             resAggDatabaseSchema,
             resAggServiceName,
           });
-          setIsLoadingForData(false);
         }
       )
       .catch((err: AxiosError) => {
         setError(err.response?.data?.responseMessage);
-        setIsLoadingForData(false);
       });
   };
 
@@ -269,7 +261,6 @@ const ExplorePage: FunctionComponent = () => {
 
   useEffect(() => {
     setSearchResult(undefined);
-    setIsLoadingForData(true);
     fetchData([
       {
         queryString: searchText,
@@ -312,44 +303,40 @@ const ExplorePage: FunctionComponent = () => {
 
   return (
     <Fragment>
-      {isLoading || isLoadingForData ? (
-        <Loader />
-      ) : (
-        <PageContainerV1>
-          <Explore
-            error={error}
-            fetchCount={fetchCounts}
-            fetchData={fetchData}
-            handleFilterChange={handleFilterChange}
-            handlePathChange={handlePathChange}
-            handleSearchText={handleSearchText}
-            initialFilter={initialFilter}
-            isFilterSelected={!isEmpty(searchFilter) || !isEmpty(initialFilter)}
-            searchFilter={searchFilter}
-            searchQuery={searchQuery}
-            searchResult={searchResult}
-            searchText={searchText}
-            showDeleted={showDeleted}
-            sortValue={initialSortField}
-            tab={tab}
-            tabCounts={{
-              table: tableCount,
-              topic: topicCount,
-              dashboard: dashboardCount,
-              pipeline: pipelineCount,
-              dbtModel: dbtModelCount,
-              mlModel: mlModelCount,
-            }}
-            updateDashboardCount={handleDashboardCount}
-            updateDbtModelCount={handleDbtModelCount}
-            updateMlModelCount={handleMlModelCount}
-            updatePipelineCount={handlePipelineCount}
-            updateTableCount={handleTableCount}
-            updateTopicCount={handleTopicCount}
-            onShowDeleted={(checked) => setShowDeleted(checked)}
-          />
-        </PageContainerV1>
-      )}
+      <PageContainerV1>
+        <Explore
+          error={error}
+          fetchCount={fetchCounts}
+          fetchData={fetchData}
+          handleFilterChange={handleFilterChange}
+          handlePathChange={handlePathChange}
+          handleSearchText={handleSearchText}
+          initialFilter={initialFilter}
+          isFilterSelected={!isEmpty(searchFilter) || !isEmpty(initialFilter)}
+          searchFilter={searchFilter}
+          searchQuery={searchQuery}
+          searchResult={searchResult}
+          searchText={searchText}
+          showDeleted={showDeleted}
+          sortValue={initialSortField}
+          tab={tab}
+          tabCounts={{
+            table: tableCount,
+            topic: topicCount,
+            dashboard: dashboardCount,
+            pipeline: pipelineCount,
+            dbtModel: dbtModelCount,
+            mlModel: mlModelCount,
+          }}
+          updateDashboardCount={handleDashboardCount}
+          updateDbtModelCount={handleDbtModelCount}
+          updateMlModelCount={handleMlModelCount}
+          updatePipelineCount={handlePipelineCount}
+          updateTableCount={handleTableCount}
+          updateTopicCount={handleTopicCount}
+          onShowDeleted={(checked) => setShowDeleted(checked)}
+        />
+      </PageContainerV1>
     </Fragment>
   );
 };