From 69c8ecd23ae1049471d52e030039752e866d4ea6 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 7 Sep 2025 19:45:30 +0100
Subject: [PATCH] New loading placeholder and transparent placeholders.

---
 .../Dashboard/common/LoadingPlaceholder.jsx   | 38 +++++++++++++++++++
 .../Dashboard/common/MissingPlaceholder.jsx   | 17 +++++++--
 2 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Dashboard/common/LoadingPlaceholder.jsx

diff --git a/src/components/Dashboard/common/LoadingPlaceholder.jsx b/src/components/Dashboard/common/LoadingPlaceholder.jsx
new file mode 100644
index 0000000..dfb6750
--- /dev/null
+++ b/src/components/Dashboard/common/LoadingPlaceholder.jsx
@@ -0,0 +1,38 @@
+import { Card, Flex, Typography } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import PropTypes from 'prop-types'
+
+const { Text } = Typography
+
+const LoadingPlaceholder = ({ message, hasBackground = true }) => {
+  return (
+    <Card
+      size='small'
+      style={{
+        background: hasBackground == false ? 'transparent' : undefined,
+        border: hasBackground == false ? '1px solid rgb(0 0 0 / 7%)' : undefined
+      }}
+    >
+      <Flex
+        justify='center'
+        gap={'small'}
+        style={{
+          height: '100%'
+        }}
+        align='center'
+      >
+        <Text type='secondary'>
+          <LoadingOutlined />
+        </Text>
+        <Text type='secondary'>{message}</Text>
+      </Flex>
+    </Card>
+  )
+}
+
+LoadingPlaceholder.propTypes = {
+  message: PropTypes.string.isRequired,
+  hasBackground: PropTypes.bool
+}
+
+export default LoadingPlaceholder
diff --git a/src/components/Dashboard/common/MissingPlaceholder.jsx b/src/components/Dashboard/common/MissingPlaceholder.jsx
index 3d6dd08..6389195 100644
--- a/src/components/Dashboard/common/MissingPlaceholder.jsx
+++ b/src/components/Dashboard/common/MissingPlaceholder.jsx
@@ -4,13 +4,21 @@ import PropTypes from 'prop-types'
 
 const { Text } = Typography
 
-const MissingPlaceholder = ({ message }) => {
+const MissingPlaceholder = ({ message, hasBackground = true }) => {
   return (
-    <Card size='small'>
+    <Card
+      size='small'
+      style={{
+        background: hasBackground == false ? 'transparent' : undefined,
+        border: hasBackground == false ? '1px solid rgb(0 0 0 / 7%)' : undefined
+      }}
+    >
       <Flex
         justify='center'
         gap={'small'}
-        style={{ height: '100%' }}
+        style={{
+          height: '100%'
+        }}
         align='center'
       >
         <Text type='secondary'>
@@ -23,7 +31,8 @@ const MissingPlaceholder = ({ message }) => {
 }
 
 MissingPlaceholder.propTypes = {
-  message: PropTypes.string.isRequired
+  message: PropTypes.string.isRequired,
+  hasBackground: PropTypes.bool
 }
 
 export default MissingPlaceholder