Adding error box when target not loaded

pkg/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx

@@ -10,6 +10,7 @@ import { FetchMock } from 'jest-fetch-mock/types';
 describe('ScrapePoolList', () => {
   const defaultProps = {
     pathPrefix: '..',
+    onLoadingChange: jest.fn(),
   };
 
   beforeEach(() => {

pkg/ui/react-app/src/pages/targets/ScrapePoolList.tsx

@@ -111,10 +111,18 @@ ScrapePoolListContent.displayName = 'ScrapePoolListContent';
 
 const ScrapePoolListWithStatusIndicator = withStatusIndicator(ScrapePoolListContent);
 
-const ScrapePoolList: FC<PathPrefixProps> = ({ pathPrefix }) => {
+const ScrapePoolList: FC<PathPrefixProps & { onLoadingChange: (loadingState: boolean) => void }> = ({
+  pathPrefix,
+  onLoadingChange,
+}) => {
   const { response, error, isLoading } = useFetch<ScrapePoolListProps>(`${pathPrefix}/api/v1/targets?state=active`);
   const { status: responseStatus } = response;
   const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
+
+  useEffect(() => {
+    onLoadingChange(isLoading); // Inform Targets.tsx about the loading state
+  }, [isLoading, onLoadingChange]);
+
   return (
     <ScrapePoolListWithStatusIndicator
       {...response.data}

pkg/ui/react-app/src/pages/targets/Targets.tsx

@@ -1,17 +1,31 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import Filter from './Filter';
 import ScrapePoolList from './ScrapePoolList';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { UncontrolledAlert } from 'reactstrap';
 
 const Targets: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
-  const scrapePoolListProps = { pathPrefix };
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLoadingChange = (loadingState: boolean) => {
+    setIsLoading(loadingState);
+  };
 
   return (
     <>
-      <h2>Targets</h2>
-      <ScrapePoolList {...scrapePoolListProps} />
+      {isLoading ? (
+        <UncontrolledAlert color="danger">
+          Sometimes the targets page doesn't fully load because it takes too long to load targets from leaf nodes. Please
+          wait some time or try again later.
+        </UncontrolledAlert>
+      ) : (
+        <>
+          <h2>Targets</h2>
+          <ScrapePoolList pathPrefix={pathPrefix} onLoadingChange={handleLoadingChange} />
+        </>
+      )}
     </>
   );
 };