Add new loading screen placeholder.

awx/ui/src/screens/TopologyView/ContentLoading.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import styled from 'styled-components';
+import {
+  EmptyState as PFEmptyState,
+  EmptyStateIcon,
+  Text,
+  TextContent,
+  TextVariants,
+  Spinner,
+} from '@patternfly/react-core';
+
+import { TopologyIcon as PFTopologyIcon } from '@patternfly/react-icons';
+
+const EmptyState = styled(PFEmptyState)`
+  --pf-c-empty-state--m-lg--MaxWidth: none;
+  min-height: 250px;
+`;
+
+const TopologyIcon = styled(PFTopologyIcon)`
+  font-size: 3em;
+  fill: #6a6e73;
+`;
+
+const ContentLoading = ({ className }) => (
+  <EmptyState variant="full" className={className}>
+    <TopologyIcon />
+    <TextContent>
+      <Text
+        component={TextVariants.small}
+        style={{ fontWeight: 'bold', color: 'black' }}
+      >
+        Please wait until the topology view is populated...
+      </Text>
+    </TextContent>
+    <EmptyStateIcon variant="container" component={Spinner} />
+  </EmptyState>
+);
+
+export { ContentLoading as _ContentLoading };
+export default ContentLoading;

awx/ui/src/screens/TopologyView/MeshGraph.js

@@ -7,7 +7,7 @@ import debounce from 'util/debounce';
 import * as d3 from 'd3';
 import Legend from './Legend';
 import Tooltip from './Tooltip';
-import ContentLoading from '../../components/ContentLoading';
+import ContentLoading from './ContentLoading';
 import { truncateString } from '../../util/strings';
 
 const Loader = styled(ContentLoading)`