chore: add place holder when there is no connections data

2 files changed, 18 insertions, 1 deletions

diff --git a/src/components/Connections.js b/src/components/Connections.js
index 66ce2ef..38b26a2 100644
--- a/src/components/Connections.js
+++ b/src/components/Connections.js
@@ -4,8 +4,11 @@ import ConnectionTable from 'c/ConnectionTable';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { useStoreState } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
+import SvgYacd from './SvgYacd';
 import * as connAPI from '../api/connections';
 
+import s from './Connections.module.css';
+
 const { useEffect, useState } = React;
 
 const paddingBottom = 30;
@@ -45,7 +48,13 @@ function Conn() {
         <div
           style={{ height: containerHeight - paddingBottom, overflow: 'auto' }}
         >
-          <ConnectionTable data={conns} />
+          {conns.length > 0 ? (
+            <ConnectionTable data={conns} />
+          ) : (
+            <div className={s.placeHolder}>
+              <SvgYacd width={200} height={200} c1="var(--color-text)" />
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/Connections.module.css b/src/components/Connections.module.css
new file mode 100644
index 0000000..4991f29
--- /dev/null
+++ b/src/components/Connections.module.css
@@ -0,0 +1,8 @@
+.placeHolder {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-background);
+  opacity: 0.1;
+}