[RHOAIENG-6510] Landing page section flow Improvements

frontend/src/__tests__/cypress/cypress/e2e/home/homeAdmin.cy.ts

@@ -74,7 +74,7 @@ describe('Home page Admin section', () => {
     cy.findByTestId('landing-page-admin--cluster-settings').should('be.visible');
     cy.findByTestId('landing-page-admin--user-management').should('not.exist');
   });
-  it('should hide the admin section if all cards are hidden', () => {
+  it.only('should hide the admin section if all cards are hidden', () => {
     asProductAdminUser();
     homePage.initHomeIntercepts({
       disableHome: false,
@@ -86,7 +86,7 @@ describe('Home page Admin section', () => {
 
     homePage.visit();
 
-    cy.get('#dashboard-page-main').find('[class="pf-v5-c-drawer__content"]').scrollTo('bottom');
+    cy.get('#dashboard-page-main').find('[class="pf-v5-c-page__main"]').scrollTo('bottom');
     cy.findByTestId('landing-page-admin').should('not.exist');
   });
   it('should navigate to the correct section when the title is clicked', () => {

frontend/src/pages/home/Home.tsx

@@ -4,6 +4,7 @@ import {
   EmptyState,
   EmptyStateHeader,
   EmptyStateIcon,
+  Page,
   PageSection,
   PageSectionVariants,
 } from '@patternfly/react-core';
@@ -21,13 +22,12 @@ const Home: React.FC = () => {
   const { status: projectsAvailable } = useIsAreaAvailable(SupportedArea.DS_PROJECTS_VIEW);
   const aiFlows = useAIFlows();
   const resourcesSection = useResourcesSection();
-
   const enableTeamSection = useEnableTeamSection();
 
-  if (!projectsAvailable && !aiFlows && !resourcesSection && !enableTeamSection) {
-    return (
-      <>
-        <HomeHint />
+  return (
+    <Page data-testid="home-page">
+      <HomeHint />
+      {!projectsAvailable && !aiFlows && !resourcesSection && !enableTeamSection ? (
         <PageSection data-testid="home-page-empty" variant={PageSectionVariants.default}>
           <Bullseye>
             <EmptyState variant="full">
@@ -39,18 +39,15 @@ const Home: React.FC = () => {
             </EmptyState>
           </Bullseye>
         </PageSection>
-      </>
-    );
-  }
-
-  return (
-    <div data-testid="home-page">
-      <HomeHint />
-      <ProjectsSection />
-      {aiFlows}
-      {resourcesSection}
-      {enableTeamSection}
-    </div>
+      ) : (
+        <>
+          <ProjectsSection />
+          {aiFlows}
+          {resourcesSection}
+          {enableTeamSection}
+        </>
+      )}
+    </Page>
   );
 };
 

frontend/src/pages/home/projects/ProjectsLoading.tsx

@@ -1,16 +1,10 @@
 import * as React from 'react';
-import { Gallery, Skeleton } from '@patternfly/react-core';
+import { Skeleton } from '@patternfly/react-core';
 
 const ProjectsLoading: React.FC = () => (
-  <Gallery
-    hasGutter
-    minWidths={{ default: '100%', lg: '20%' }}
-    maxWidths={{ default: '100%', lg: '20%' }}
-  >
-    <Skeleton style={{ height: 250 }} />
-    <Skeleton style={{ height: 250 }} />
-    <Skeleton style={{ height: 250 }} />
-  </Gallery>
+  <div style={{ height: '230px' }}>
+    <Skeleton height="75%" width="100%" screenreaderText="Loading projects" />
+  </div>
 );
 
 export default ProjectsLoading;

frontend/src/pages/home/resources/useResourcesSection.tsx

@@ -18,7 +18,6 @@ import ScrolledGallery from '~/concepts/design/ScrolledGallery';
 import CollapsibleSection from '~/concepts/design/CollapsibleSection';
 import { useBrowserStorage } from '~/components/browserStorage';
 import { useSpecifiedResources } from './useSpecifiedResources';
-import ResourcesLoading from './ResourcesLoading';
 
 const includedCards = [
   { name: 'create-jupyter-notebook', kind: 'OdhQuickStart' },
@@ -38,7 +37,7 @@ export const useResourcesSection = (): React.ReactNode => {
     false,
   );
 
-  if (loaded && !loadError && docs.length === 0) {
+  if (!loadError && (!loaded || docs.length === 0)) {
     return null;
   }
 
@@ -60,8 +59,6 @@ export const useResourcesSection = (): React.ReactNode => {
               />
               <EmptyStateBody>{loadError.message}</EmptyStateBody>
             </EmptyState>
-          ) : !loaded ? (
-            <ResourcesLoading />
           ) : (
             <ScrolledGallery count={docs.length} childWidth="330px">
               {docs.map((doc) => (