From 4873a22dc760f6cc21dba3c8d5f779cb9c3d4293 Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Thu, 14 Sep 2017 14:19:29 -0700
Subject: [PATCH] add cycling of messages to loading and error wrapper
---
.../components/LoadingAndErrorWrapper.jsx | 76 +++++++++++++++----
.../xray/containers/SegmentComparison.jsx | 6 ++
frontend/src/metabase/xray/xray.js | 1 +
3 files changed, 70 insertions(+), 13 deletions(-)
diff --git a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
index d89b9d9f227..b155be6ba5d 100644
--- a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
+++ b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
@@ -7,15 +7,24 @@ import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
import cx from "classnames";
export default class LoadingAndErrorWrapper extends Component {
+
+ state = {
+ messageIndex: 0,
+ loadCount: 0
+ }
+
static propTypes = {
- className: PropTypes.string,
- error: PropTypes.any,
- loading: PropTypes.any,
- noBackground: PropTypes.bool,
- noWrapper: PropTypes.bool,
- children: PropTypes.any,
- style: PropTypes.object,
- showSpinner: PropTypes.bool
+ className: PropTypes.string,
+ error: PropTypes.any,
+ loading: PropTypes.any,
+ noBackground: PropTypes.bool,
+ noWrapper: PropTypes.bool,
+ children: PropTypes.any,
+ style: PropTypes.object,
+ showSpinner: PropTypes.bool,
+ loadingMessages: PropTypes.array,
+ messageInterval: PropTypes.number,
+ loadingTimeout: PropTypes.number
};
static defaultProps = {
@@ -24,7 +33,10 @@ export default class LoadingAndErrorWrapper extends Component {
loading: false,
noBackground: false,
noWrapper: false,
- showSpinner: true
+ showSpinner: true,
+ loadingMessages: ['Loading...'],
+ messageInterval: 6000,
+ loadingTimeout: 20000,
};
getErrorMessage() {
@@ -38,6 +50,23 @@ export default class LoadingAndErrorWrapper extends Component {
);
}
+ componentDidMount () {
+ const { loadingMessages, messageInterval } = this.props;
+ // only start cycling if multiple messages are provided
+ if(loadingMessages.length > 1) {
+ this.cycle = setInterval(this.cycleLoadingMessage, messageInterval)
+ }
+ }
+
+ componentWillUnmount () {
+ clearInterval(this.cycle)
+ }
+
+ loadingInterval = () => {
+ this.setState({ loadCount: this.state.loadCount + 1})
+ this.cycleLoadingMessage()
+ }
+
getChildren() {
function resolveChild(child) {
if (Array.isArray(child)) {
@@ -51,11 +80,31 @@ export default class LoadingAndErrorWrapper extends Component {
return resolveChild(this.props.children);
}
+ cycleLoadingMessage = () => {
+ this.setState({
+ messageIndex: this.state.messageIndex + 1 < this.props.loadingMessages.length -1
+ ? this.state.messageIndex + 1
+ : 0
+
+ })
+ }
+
render() {
- const { loading, error, noBackground, noWrapper, showSpinner } = this.props;
+ const {
+ loading,
+ error,
+ noBackground,
+ noWrapper,
+ showSpinner,
+ loadingMessages
+ } = this.props;
+
+ const { messageIndex } = this.state;
+
const contentClassName = cx("wrapper py4 text-brand text-centered flex-full flex flex-column layout-centered", {
"bg-white": !noBackground
});
+
if (noWrapper && !error && !loading) {
return React.Children.only(this.getChildren());
}
@@ -66,10 +115,11 @@ export default class LoadingAndErrorWrapper extends Component {
<h2 className="text-normal text-grey-2 ie-wrap-content-fix">{this.getErrorMessage()}</h2>
</div>
: loading ?
- showSpinner &&
<div className={contentClassName}>
- <LoadingSpinner />
- <h2 className="text-normal text-grey-2 mt1">Loading...</h2>
+ { showSpinner && <LoadingSpinner /> }
+ <h2 className="text-normal text-grey-2 mt1">
+ {loadingMessages[messageIndex]}
+ </h2>
</div>
:
diff --git a/frontend/src/metabase/xray/containers/SegmentComparison.jsx b/frontend/src/metabase/xray/containers/SegmentComparison.jsx
index c5c67a95d14..47e25a8ec4a 100644
--- a/frontend/src/metabase/xray/containers/SegmentComparison.jsx
+++ b/frontend/src/metabase/xray/containers/SegmentComparison.jsx
@@ -42,6 +42,7 @@ class SegmentComparison extends Component {
try {
await this.props.fetchSegmentComparison(segmentId1, segmentId2, cost)
} catch (error) {
+ console.log('error', error)
this.setState({ error })
}
}
@@ -63,6 +64,11 @@ class SegmentComparison extends Component {
loading={!comparison}
error={error}
noBackground
+ loadingMessages={[
+ 'Generating ypur comparison...',
+ 'Teaching robots to love...',
+ 'Still working...',
+ ]}
>
{ () =>
diff --git a/frontend/src/metabase/xray/xray.js b/frontend/src/metabase/xray/xray.js
index f464f051cd8..fa23ad4d5ee 100644
--- a/frontend/src/metabase/xray/xray.js
+++ b/frontend/src/metabase/xray/xray.js
@@ -84,6 +84,7 @@ export const fetchTableComparison = createThunkAction(
return comparison
} catch (error) {
console.error(error)
+ return error
}
}
)
--
GitLab