Repository: strapi/strapi
File: packages/core/admin/admin/src/pages/Home/HomePage.tsx (TypeScript)

Code before:
  }, [checkUserHasPermissions, getAllWidgets]);

  return (
    <Main>
      <Page.Title>
        {formatMessage({ id: 'HomePage.head.title', defaultMessage: 'Homepage' })}
      </Page.Title>
      <Layouts.Header
        title={formatMessage(
          { id: 'HomePage.header.title', defaultMessage: 'Hello {name}' },
          { name: displayName }
        )}
        subtitle={formatMessage({
          id: 'HomePage.header.subtitle',
          defaultMessage: 'Welcome to your administration panel',
        })}
      />
      <FreeTrialWelcomeModal />
      <FreeTrialEndedModal />
      <Layouts.Content>
        <Flex direction="column" alignItems="stretch" gap={8} paddingBottom={10}>
          <GuidedTourHomepageOverview />
          {loading ? (
            <Box position="absolute">
              <Widget.Loading />
            </Box>
          ) : (
            <Grid.Root gap={5}>
              {filteredWidgets.map((widget) => (
                <Grid.Item col={6} s={12} key={widget.uid}>
                  <WidgetRoot title={widget.title} icon={widget.icon} link={widget.link}>
                    <WidgetComponent component={widget.component} />
                  </WidgetRoot>
                </Grid.Item>
              ))}
            </Grid.Root>
          )}
        </Flex>
      </Layouts.Content>
    </Main>
  );
};

/* -------------------------------------------------------------------------------------------------
 * HomePage
 * -----------------------------------------------------------------------------------------------*/

const HomePage = () => {
  const Page = useEnterprise(
    HomePageCE,
    // eslint-disable-next-line import/no-cycle

Review comment (suggestion):
this is the loader designed for individual widgets, for page-level loading you should use <Page.Loading />

Code after:
  }, [checkUserHasPermissions, getAllWidgets]);

  return (
    <Main>
      <Page.Title>
        {formatMessage({ id: 'HomePage.head.title', defaultMessage: 'Homepage' })}
      </Page.Title>
      <Layouts.Header
        title={formatMessage(
          { id: 'HomePage.header.title', defaultMessage: 'Hello {name}' },
          { name: displayName }
        )}
        subtitle={formatMessage({
          id: 'HomePage.header.subtitle',
          defaultMessage: 'Welcome to your administration panel',
        })}
      />
      <FreeTrialWelcomeModal />
      <FreeTrialEndedModal />
      <Layouts.Content>
        <Flex direction="column" alignItems="stretch" gap={8} paddingBottom={10}>
          <GuidedTourHomepageOverview />
          {loading ? (
            <Box position="absolute" top={0} left={0} right={0} bottom={0}>
              <Page.Loading />
            </Box>
          ) : (
            <Grid.Root gap={5}>
              {filteredWidgets.map((widget) => (
                <Grid.Item col={6} s={12} key={widget.uid}>
                  <WidgetRoot title={widget.title} icon={widget.icon} link={widget.link}>
                    <WidgetComponent component={widget.component} />
                  </WidgetRoot>
                </Grid.Item>
              ))}
            </Grid.Root>
          )}
        </Flex>
      </Layouts.Content>
    </Main>
  );
};

/* -------------------------------------------------------------------------------------------------
 * HomePage
 * -----------------------------------------------------------------------------------------------*/

const HomePage = () => {
  const Page = useEnterprise(
    HomePageCE,
    // eslint-disable-next-line import/no-cycle