From 272e0126269b0ac07db6f3a5a8282e71e7383831 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Wed, 9 Feb 2022 11:18:19 -0800
Subject: [PATCH] Add new loading screen placeholder.

---
 .../screens/TopologyView/ContentLoading.js    | 41 +++++++++++++++++++
 awx/ui/src/screens/TopologyView/MeshGraph.js  |  2 +-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 awx/ui/src/screens/TopologyView/ContentLoading.js

diff --git a/awx/ui/src/screens/TopologyView/ContentLoading.js b/awx/ui/src/screens/TopologyView/ContentLoading.js
new file mode 100644
index 0000000000..c92555e47d
--- /dev/null
+++ b/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;
diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index a30d5785d2..67ddf3680a 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/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)`