fix: flickering while loading

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

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 };
 };