Progress check-in.

components/metrics/EventsChart.js

@@ -67,7 +67,7 @@ export default function EventsChart({ websiteId, className, token }) {
   }
 
   if (isLoading) {
-    return <Loading variant="dots" />;
+    return <Loading icon="dots" />;
   }
 
   if (!data) {

components/metrics/MetricCard.module.css

@@ -6,7 +6,7 @@
 }
 
 .value {
-  font-size: var(--font-size-xxl);
+  font-size: var(--font-size-2xl);
   line-height: 40px;
   min-height: 40px;
   font-weight: 600;

components/metrics/MetricsBar.js

@@ -19,7 +19,7 @@ export default function MetricsBar({ websiteId, className }) {
     query: { url, referrer, os, browser, device, country },
   } = usePageQuery();
 
-  const { data, error, isLoading } = useQuery(
+  const { data, error, isLoading, isFetched } = useQuery(
     ['websites:stats', { websiteId, modified, url, referrer, os, browser, device, country }],
     () =>
       get(`/websites/${websiteId}/stats`, {
@@ -53,9 +53,9 @@ export default function MetricsBar({ websiteId, className }) {
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      {isLoading && <Loading variant="dots" />}
+      {isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {data && !error && (
+      {data && !error && isFetched && (
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}

components/metrics/MetricsTable.js

@@ -37,7 +37,7 @@ export default function MetricsTable({
   const { formatMessage } = useIntl();
   const { get, useQuery } = useApi();
 
-  const { data, isLoading, error } = useQuery(
+  const { data, isLoading, isFetched, error } = useQuery(
     [
       'websites:mnetrics',
       { websiteId, type, modified, url, referrer, os, browser, device, country },
@@ -73,7 +73,7 @@ export default function MetricsTable({
 
   return (
     <div className={classNames(styles.container, className)}>
-      {!data && isLoading && <Loading variant="dots" />}
+      {!data && isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
       {data && !error && <DataTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>

components/metrics/OSTable.js

@@ -1,8 +1,11 @@
+import { useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
-import { FormattedMessage } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
+import { labels } from 'components/messages';
 
 export default function OSTable({ websiteId, ...props }) {
+  const { formatMessage } = useIntl();
+
   function renderLink({ x: os }) {
     return <FilterLink id="os" value={os} />;
   }
@@ -10,11 +13,11 @@ export default function OSTable({ websiteId, ...props }) {
   return (
     <MetricsTable
       {...props}
-      title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
-      type="os"
-      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
-      renderLabel={renderLink}
       websiteId={websiteId}
+      title={formatMessage(labels.os)}
+      metric={formatMessage(labels.visitors)}
+      renderLabel={renderLink}
+      type="os"
     />
   );
 }

components/metrics/WebsiteChart.js

@@ -83,7 +83,7 @@ export default function WebsiteChart({
   }
 
   if (isLoading) {
-    return <Loading variant="dots" />;
+    return <Loading icon="dots" />;
   }
 
   return (