+ state = {
+ showLoading: false,
+ prevRefresh: '',
+ prevRoute: '',
+ };
+
+ componentDidUpdate(prevProps: DataExplorerProps<T>) {
+ const currentRefresh = this.props.currentRefresh || '';
+ const currentRoute = this.props.currentRoute || '';
+
+ if (currentRoute !== this.state.prevRoute) {
+ // Component already mounted, but the user comes from a route change,
+ // like browsing through a project hierarchy.
+ this.setState({
+ showLoading: this.props.working,
+ prevRoute: currentRoute,
+ });
+ }
+
+ if (currentRefresh !== this.state.prevRefresh) {
+ // Component already mounted, but the user just clicked the
+ // refresh button.
+ this.setState({
+ showLoading: this.props.working,
+ prevRefresh: currentRefresh,
+ });
+ }
+ if (this.state.showLoading && !this.props.working) {
+ this.setState({
+ showLoading: false,
+ });
+ }
+ }