From 25eac3429b75ab637a36722d510340872172778f Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Fri, 15 Sep 2017 15:29:28 -0700
Subject: [PATCH] add loading messages
---
frontend/src/metabase/xray/containers/CardXRay.jsx | 11 +++++++++--
frontend/src/metabase/xray/containers/FieldXray.jsx | 5 ++++-
.../metabase/xray/containers/SegmentComparison.jsx | 12 +++---------
.../xray/containers/SegmentTableComparison.jsx | 5 ++++-
frontend/src/metabase/xray/containers/TableXRay.jsx | 5 ++++-
frontend/src/metabase/xray/selectors.js | 2 +-
frontend/src/metabase/xray/utils.js | 5 +++++
frontend/test/xray/xray.unit.spec.js | 3 ++-
8 files changed, 32 insertions(+), 16 deletions(-)
diff --git a/frontend/src/metabase/xray/containers/CardXRay.jsx b/frontend/src/metabase/xray/containers/CardXRay.jsx
index 632cac93070..726c39baa36 100644
--- a/frontend/src/metabase/xray/containers/CardXRay.jsx
+++ b/frontend/src/metabase/xray/containers/CardXRay.jsx
@@ -14,7 +14,8 @@ import Visualization from 'metabase/visualizations/components/Visualization'
import { XRayPageWrapper, Heading } from 'metabase/xray/components/XRayLayout'
import Periodicity from 'metabase/xray/components/Periodicity'
-import { hasXray } from 'metabase/xray/utils'
+import { hasXray, loadingMessages } from 'metabase/xray/utils'
+import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'
type Props = {
fetchCardXray: () => void,
@@ -64,7 +65,13 @@ class CardXRay extends Component {
const { xray, isLoading } = this.props
const { error } = this.state
return (
- <LoadingAndErrorWrapper loading={isLoading || !hasXray(xray)} error={error}>
+ <LoadingAndErrorWrapper
+ loading={isLoading || !hasXray(xray)}
+ error={error}
+ noBackground
+ loadingMessages={loadingMessages}
+ loadingScenes={[<LoadingAnimation />]}
+ >
{ () =>
<XRayPageWrapper>
<div className="mt4 mb2">
diff --git a/frontend/src/metabase/xray/containers/FieldXray.jsx b/frontend/src/metabase/xray/containers/FieldXray.jsx
index f805152afc0..1f72c6c7cd9 100644
--- a/frontend/src/metabase/xray/containers/FieldXray.jsx
+++ b/frontend/src/metabase/xray/containers/FieldXray.jsx
@@ -24,9 +24,10 @@ import StatGroup from 'metabase/xray/components/StatGroup'
import Histogram from 'metabase/xray/Histogram'
import { Heading, XRayPageWrapper } from 'metabase/xray/components/XRayLayout'
-import { hasXray } from 'metabase/xray/utils'
+import { hasXray, loadingMessages } from 'metabase/xray/utils'
import Periodicity from 'metabase/xray/components/Periodicity'
+import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'
import type { Field } from 'metabase/meta/types/Field'
import type { Table } from 'metabase/meta/types/Table'
@@ -97,6 +98,8 @@ class FieldXRay extends Component {
loading={isLoading || !hasXray(xray)}
error={error}
noBackground
+ loadingMessages={loadingMessages}
+ loadingScenes={[<LoadingAnimation />]}
>
{ () =>
<XRayPageWrapper>
diff --git a/frontend/src/metabase/xray/containers/SegmentComparison.jsx b/frontend/src/metabase/xray/containers/SegmentComparison.jsx
index 4f854ec0510..9323b791c66 100644
--- a/frontend/src/metabase/xray/containers/SegmentComparison.jsx
+++ b/frontend/src/metabase/xray/containers/SegmentComparison.jsx
@@ -18,7 +18,7 @@ import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'
-import { hasComparison } from 'metabase/xray/utils'
+import { hasComparison, loadingMessages } from 'metabase/xray/utils'
const mapStateToProps = (state) => ({
comparison: getComparison(state),
@@ -69,14 +69,8 @@ class SegmentComparison extends Component {
loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
- loadingMessages={[
- 'Generating your comparison...',
- 'Teaching robots to love...',
- 'Still working...',
- ]}
- loadingScenes={[
- <LoadingAnimation />
- ]}
+ loadingMessages={loadingMessages}
+ loadingScenes={[<LoadingAnimation />]}
>
{ () =>
diff --git a/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx b/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
index a29058cb045..bf489234838 100644
--- a/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
+++ b/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
@@ -16,7 +16,8 @@ import {
import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
-import { hasComparison } from 'metabase/xray/utils'
+import { hasComparison, loadingMessages } from 'metabase/xray/utils'
+import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'
const mapStateToProps = state => ({
comparison: getComparison(state),
@@ -55,6 +56,8 @@ class SegmentTableComparison extends Component {
loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
+ loadingMessages={loadingMessages}
+ loadingScenes={[<LoadingAnimation />]}
>
{ () =>
<XRayComparison
diff --git a/frontend/src/metabase/xray/containers/TableXRay.jsx b/frontend/src/metabase/xray/containers/TableXRay.jsx
index 90f722fd034..981caf93fab 100644
--- a/frontend/src/metabase/xray/containers/TableXRay.jsx
+++ b/frontend/src/metabase/xray/containers/TableXRay.jsx
@@ -20,10 +20,11 @@ import {
import Icon from 'metabase/components/Icon'
import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
+import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'
import type { Table } from 'metabase/meta/types/Table'
-import { hasXray } from 'metabase/xray/utils'
+import { hasXray, loadingMessages } from 'metabase/xray/utils'
type Props = {
constituents: [],
@@ -88,6 +89,8 @@ class TableXRay extends Component {
loading={isLoading || !hasXray(xray)}
error={error}
noBackground
+ loadingMessages={loadingMessages}
+ loadingScenes={[<LoadingAnimation />]}
>
{ () =>
<div className="full">
diff --git a/frontend/src/metabase/xray/selectors.js b/frontend/src/metabase/xray/selectors.js
index 35154b04677..063fc8241f9 100644
--- a/frontend/src/metabase/xray/selectors.js
+++ b/frontend/src/metabase/xray/selectors.js
@@ -29,7 +29,7 @@ export const getSegmentConstituents = (state) =>
)
)
-export const getComparison = (state) => state.xray.comparison && state.xray.comparison
+export const getComparison = (state) => state.xray.comparison
export const getComparisonFields = createSelector(
[getComparison],
diff --git a/frontend/src/metabase/xray/utils.js b/frontend/src/metabase/xray/utils.js
index 74d8b386490..f5257b30935 100644
--- a/frontend/src/metabase/xray/utils.js
+++ b/frontend/src/metabase/xray/utils.js
@@ -21,3 +21,8 @@ function has (entity) {
export const hasXray = has
export const hasComparison = has
+
+export const loadingMessages = [
+ 'Generating your comparison...',
+ 'Still working...',
+]
diff --git a/frontend/test/xray/xray.unit.spec.js b/frontend/test/xray/xray.unit.spec.js
index bab35d45f09..90d9a71a190 100644
--- a/frontend/test/xray/xray.unit.spec.js
+++ b/frontend/test/xray/xray.unit.spec.js
@@ -15,7 +15,8 @@ describe('xray', () => {
const expected = {
comparison: {
features: {}
- }
+ },
+ loading: false
}
expect(reducer({}, action)).toEqual(expected)
--
GitLab