pool+batches: display an empty msg when there are no batches

Author: jamaljsr

app/src/components/pool/BatchSection.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Section } from 'components/base';
 import { styled } from 'components/theme';
@@ -15,17 +16,31 @@ const Styled = {
     display: flex;
     background-color: transparent;
   `,
+  Empty: styled.div`
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: ${props => props.theme.colors.gray};
+  `,
 };
 
 const BatchSection: React.FC = () => {
+  const { l } = usePrefixedTranslation('cmps.pool.BatchSection');
   const { batchesView } = useStore();
 
-  const { Section } = Styled;
+  const { Section, Empty } = Styled;
   return (
     <Section>
       <BatchStats />
       <BatchControls />
-      {batchesView.viewMode === 'chart' ? <BatchChart /> : <BatchList />}
+      {batchesView.isEmpty ? (
+        <Empty>{l('empty')}</Empty>
+      ) : batchesView.viewMode === 'chart' ? (
+        <BatchChart />
+      ) : (
+        <BatchList />
+      )}
     </Section>
   );
 };

app/src/i18n/locales/en-US.json

@@ -170,6 +170,7 @@
   "cmps.pool.batches.BatchStats.earned": "Earned",
   "cmps.pool.batches.BatchStats.paid": "Paid",
   "cmps.pool.batches.BatchControls.markets": "Markets",
+  "cmps.pool.BatchSection.empty": "There are currently no cleared batches in this market.",
   "cmps.pool.orders.OrdersList.emptyMsg": "You do not have any {{filter}} orders.",
   "cmps.pool.orders.OrdersList.emptyAllMsg": "Submit an order using the form on the left.",
   "cmps.pool.orders.OrdersList.type": "Type",

app/src/store/stores/batchStore.ts

@@ -40,8 +40,11 @@ export default class BatchStore {
   /** the tier of the current LND node */
   nodeTier?: Tier;
 
-  /** indicates when batches are being fetched from the backend */
-  loading = false;
+  /**
+   * indicates when batches are being fetched from the backend, default to true to
+   * prevent UI flicker on initial load
+   */
+  loading = true;
 
   constructor(store: Store) {
     makeAutoObservable(this, {}, { deep: false, autoBind: true });

app/src/store/views/batchesView.ts

@@ -95,6 +95,11 @@ export default class BatchesView {
     }));
   }
 
+  /** determines if there are no batches in the current market */
+  get isEmpty() {
+    return this.batches.length === 0 && !this._store.batchStore.loading;
+  }
+
   /** determines if the market badges should be visible above the chart */
   get showMarketBadges() {
     return this.openMarkets.length > 1;