From d5b3c9c7ecbb63d59b0bb14a3ebdd5e2c02659d9 Mon Sep 17 00:00:00 2001
From: Tim Hansen <timbonicus@gmail.com>
Date: Thu, 24 Jun 2021 20:43:10 -0600
Subject: [PATCH] Set useEntityListProvider initial loading state

Signed-off-by: Tim Hansen <timbonicus@gmail.com>
---
 .../src/hooks/useEntityListProvider.tsx       | 60 ++++++++++---------
 .../components/TemplateList/TemplateList.tsx  |  3 +-
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
index 1b96b1f759..0aa52d2227 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
@@ -107,34 +107,40 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>({
   // The main async filter worker. Note that while it has a lot of dependencies
   // in terms of its implementation, the triggering only happens (debounced)
   // based on the requested filters changing.
-  const [{ loading, error }, refresh] = useAsyncFn(async () => {
-    const compacted = compact(Object.values(requestedFilters));
-    const entityFilter = reduceEntityFilters(compacted);
-    const backendFilter = reduceCatalogFilters(compacted);
-    const previousBackendFilter = reduceCatalogFilters(
-      compact(Object.values(outputState.appliedFilters)),
-    );
+  const [{ loading, error }, refresh] = useAsyncFn(
+    async () => {
+      const compacted = compact(Object.values(requestedFilters));
+      const entityFilter = reduceEntityFilters(compacted);
+      const backendFilter = reduceCatalogFilters(compacted);
+      const previousBackendFilter = reduceCatalogFilters(
+        compact(Object.values(outputState.appliedFilters)),
+      );
 
-    // TODO(mtlewis): currently entities will never be requested unless
-    // there's at least one filter, we should allow an initial request
-    // to happen with no filters.
-    if (!isEqual(previousBackendFilter, backendFilter)) {
-      // TODO(timbonicus): should limit fields here, but would need filter
-      // fields + table columns
-      const response = await catalogApi.getEntities({ filter: backendFilter });
-      setOutputState({
-        appliedFilters: requestedFilters,
-        backendEntities: response.items,
-        entities: response.items.filter(entityFilter),
-      });
-    } else {
-      setOutputState({
-        appliedFilters: requestedFilters,
-        backendEntities: outputState.backendEntities,
-        entities: outputState.backendEntities.filter(entityFilter),
-      });
-    }
-  }, [catalogApi, requestedFilters, outputState]);
+      // TODO(mtlewis): currently entities will never be requested unless
+      // there's at least one filter, we should allow an initial request
+      // to happen with no filters.
+      if (!isEqual(previousBackendFilter, backendFilter)) {
+        // TODO(timbonicus): should limit fields here, but would need filter
+        // fields + table columns
+        const response = await catalogApi.getEntities({
+          filter: backendFilter,
+        });
+        setOutputState({
+          appliedFilters: requestedFilters,
+          backendEntities: response.items,
+          entities: response.items.filter(entityFilter),
+        });
+      } else {
+        setOutputState({
+          appliedFilters: requestedFilters,
+          backendEntities: outputState.backendEntities,
+          entities: outputState.backendEntities.filter(entityFilter),
+        });
+      }
+    },
+    [catalogApi, requestedFilters, outputState],
+    { loading: true },
+  );
 
   // Slight debounce on the refresh, since (especially on page load) several
   // filters will be calling this in rapid succession.
diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
index 4b9a7030d9..f012ab68d0 100644
--- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
+++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
@@ -29,7 +29,6 @@ export const TemplateList = () => {
   const { loading, error, entities } = useEntityListProvider();
   return (
     <>
-      {/* TODO(mtlewis) figure out flash of error state when entities are loading */}
       {loading && <Progress />}
 
       {error && (
@@ -38,7 +37,7 @@ export const TemplateList = () => {
         </WarningPanel>
       )}
 
-      {!error && !loading && entities && !entities.length && (
+      {!error && !loading && !entities.length && (
         <Typography variant="body2">
           No templates found that match your filter. Learn more about{' '}
           <Link href="https://backstage.io/docs/features/software-templates/adding-templates">