Fix more button. Added NoData component.

components/common/NoData.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import styles from './NoData.module.css';
+
+export default function NoData({ className }) {
+  return (
+    <div className={classNames(styles.container, className)}>
+      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+    </div>
+  );
+}

components/common/NoData.module.css

@@ -0,0 +1,7 @@
+.container {
+  color: var(--gray500);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

components/common/Table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import NoData from 'components/common/NoData';
 import styles from './Table.module.css';
-import { FormattedMessage } from 'react-intl';
 
 export default function Table({ columns, rows, empty }) {
   if (empty && rows.length === 0) {
@@ -22,11 +22,7 @@ export default function Table({ columns, rows, empty }) {
         ))}
       </div>
       <div className={styles.body}>
-        {rows.length === 0 && (
+        {rows.length === 0 && <NoData />}
-          <div className={styles.empty}>
-            <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
-          </div>
-        )}
         {rows.map((row, rowIndex) => (
           <div className={classNames(styles.row, 'row')} key={rowIndex}>
             {columns.map(({ key, render, className, style, cell }) => (

components/common/Table.module.css

@@ -19,14 +19,6 @@
   flex-direction: column;
 }
 
-.empty {
-  color: var(--gray500);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .row {
   border-bottom: 1px solid var(--gray300);
   padding: 10px 0;

components/metrics/MetricsTable.js

@@ -1,16 +1,17 @@
 import React, { useState, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
 import Loading from 'components/common/Loading';
+import NoData from 'components/common/NoData';
 import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import { useDateRange } from 'hooks/useDateRange';
 import styles from './MetricsTable.module.css';
-import { FormattedMessage } from 'react-intl';
 
 export default function MetricsTable({
   websiteId,
@@ -77,7 +78,8 @@ export default function MetricsTable({
 
   return (
     <div className={classNames(styles.container, className)}>
-      {data ? (
+      {!data && <Loading />}
+      {data && (
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>
@@ -87,14 +89,7 @@ export default function MetricsTable({
             </div>
           </div>
           <div className={styles.body}>
-            {rankings?.length === 0 && (
+            {rankings?.length === 0 && <NoData />}
-              <div className={styles.empty}>
-                <FormattedMessage
-                  id="message.no-data-available"
-                  defaultMessage="No data available."
-                />
-              </div>
-            )}
             {limit
               ? rankings.map(row => getRow(row))
               : rankings.length > 0 && (
@@ -104,7 +99,7 @@ export default function MetricsTable({
                 )}
           </div>
           <div className={styles.footer}>
-            {limit && rankings.length > limit && (
+            {limit && data.length > limit && (
               <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
                 <div>
                   <FormattedMessage id="button.more" defaultMessage="More" />
@@ -113,8 +108,6 @@ export default function MetricsTable({
             )}
           </div>
         </>
-      ) : (
-        <Loading />
       )}
     </div>
   );

components/metrics/MetricsTable.module.css

@@ -95,14 +95,6 @@
   overflow: hidden;
 }
 
-.empty {
-  color: var(--gray500);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .footer {
   display: flex;
   justify-content: center;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",