From 81703f1f1a3d9e581e96e74fb3197b3ad8707e61 Mon Sep 17 00:00:00 2001
From: Shashank Bairy R <shashank.bairy04@gmail.com>
Date: Tue, 29 Sep 2020 16:14:33 +0530
Subject: [PATCH] fix: flickering while loading

---
 plugins/catalog/src/components/Router.tsx | 5 +++--
 plugins/catalog/src/hooks/useEntity.ts    | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/plugins/catalog/src/components/Router.tsx b/plugins/catalog/src/components/Router.tsx
index d1ad06a03e..c6e706c15b 100644
--- a/plugins/catalog/src/components/Router.tsx
+++ b/plugins/catalog/src/components/Router.tsx
@@ -46,9 +46,10 @@ const DefaultEntityPage = () => (
 );
 
 const EntityPageSwitch = ({ EntityPage }: { EntityPage: ComponentType }) => {
-  const { entity } = useEntity();
+  const { entity, loading, error } = useEntity();
   // Loading and error states
-  if (!entity) return <EntityNotFound />;
+  if (loading) return <EntityPageLayout />;
+  if (error || (!loading && !entity)) return <EntityNotFound />;
 
   // Otherwise EntityPage provided from the App
   // Note that EntityPage will include EntityPageLayout already
diff --git a/plugins/catalog/src/hooks/useEntity.ts b/plugins/catalog/src/hooks/useEntity.ts
index 1f076c0a05..abbfd03b5b 100644
--- a/plugins/catalog/src/hooks/useEntity.ts
+++ b/plugins/catalog/src/hooks/useEntity.ts
@@ -58,6 +58,8 @@ export const useEntityFromUrl = (): EntityLoadingStatus => {
  * Always going to return an entity, or throw an error if not a descendant of a EntityProvider.
  */
 export const useEntity = () => {
-  const { entity } = useContext<{ entity: Entity }>(EntityContext as any);
-  return { entity };
+  const { entity, loading, error } = useContext<EntityLoadingStatus>(
+    EntityContext as any,
+  );
+  return { entity, loading, error };
 };