fix: remove loading state if already data is already loaded to avoid …

…flickering

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