From 07b3a0380a8a806cc3f5041700ff3e0a681d409b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Wed, 3 Jul 2024 13:29:42 +0200
Subject: [PATCH] fix: remove loading state if already data is already loaded
 to avoid flickering

---
 .../components/LibraryComponents.tsx          | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/library-authoring/components/LibraryComponents.tsx b/src/library-authoring/components/LibraryComponents.tsx
index 48288946b3..61389395c6 100644
--- a/src/library-authoring/components/LibraryComponents.tsx
+++ b/src/library-authoring/components/LibraryComponents.tsx
@@ -63,28 +63,24 @@ const LibraryComponents = ({
     return result;
   }, [blockTypesData]);
 
-  const { showLoading, showContent } = useMemo(() => {
+
+  const a = (isFetching, isFetchingNextPage) => {
     let resultShowLoading = false;
-    let resultShowContent = false;
 
     if (isFetching && !isFetchingNextPage) {
       // First load; show loading but not content.
       resultShowLoading = true;
-      resultShowContent = false;
     } else if (isFetchingNextPage) {
       // Load next page; show content and loading.
       resultShowLoading = true;
-      resultShowContent = true;
     } else if (!isFetching && !isFetchingNextPage) {
       // State without loads; show content.
       resultShowLoading = false;
-      resultShowContent = true;
     }
-    return {
-      showLoading: resultShowLoading,
-      showContent: resultShowContent,
-    };
-  }, [isFetching, isFetchingNextPage]);
+    return resultShowLoading;
+  };
+
+  const showLoading = isFetching || isFetchingNextPage;
 
   useEffect(() => {
     if (variant === 'full') {
@@ -121,7 +117,7 @@ const LibraryComponents = ({
       }}
       hasEqualColumnHeights
     >
-      { showContent ? componentList.map((component) => (
+      {componentList.map((component) => (
         <ComponentCard
           key={component.id}
           title={component.displayName}
@@ -130,7 +126,7 @@ const LibraryComponents = ({
           blockType={component.blockType}
           blockTypeDisplayName={blockTypes[component.blockType]?.displayName ?? ''}
         />
-      )) : <ComponentCardLoading />}
+      ))}
       { showLoading && <ComponentCardLoading /> }
     </CardGrid>
   );