determine loading

frontend/src/metabase/xray/containers/CardXRay.jsx

@@ -14,6 +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'
+
 type Props = {
     fetchCardXray: () => void,
     isLoading: boolean,
@@ -62,7 +64,7 @@ class CardXRay extends Component {
         const { xray, isLoading } = this.props
         const { error } = this.state
         return (
-            <LoadingAndErrorWrapper loading={isLoading} error={error}>
+            <LoadingAndErrorWrapper loading={isLoading || !hasXray(xray)} error={error}>
                 { () =>
                     <XRayPageWrapper>
                         <div className="mt4 mb2">

frontend/src/metabase/xray/containers/FieldXray.jsx

@@ -24,6 +24,8 @@ 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 Periodicity from 'metabase/xray/components/Periodicity'
 
 import type { Field } from 'metabase/meta/types/Field'
@@ -87,9 +89,12 @@ class FieldXRay extends Component {
     render () {
         const { xray, params, isLoading } = this.props
         const { error } = this.state
+
+        console.log(hasXray(xray))
+
         return (
             <LoadingAndErrorWrapper
-                loading={isLoading}
+                loading={isLoading || !hasXray(xray)}
                 error={error}
                 noBackground
             >

frontend/src/metabase/xray/containers/SegmentComparison.jsx

@@ -10,19 +10,22 @@ import {
     getComparisonFields,
     getComparisonContributors,
     getSegmentItem,
-    getTitle
+    getTitle,
+    getLoadingStatus
 } from 'metabase/xray/selectors'
 
-
 import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
 import XRayComparison from 'metabase/xray/components/XRayComparison'
 
+import { hasComparison } from 'metabase/xray/utils'
+
 const mapStateToProps = (state) => ({
-        comparison: getComparison(state),
-        fields: getComparisonFields(state),
-        contributors: getComparisonContributors(state),
-        itemA: getSegmentItem(state, 0),
-        itemB: getSegmentItem(state, 1)
+    comparison: getComparison(state),
+    fields: getComparisonFields(state),
+    contributors: getComparisonContributors(state),
+    itemA: getSegmentItem(state, 0),
+    itemB: getSegmentItem(state, 1),
+    isLoading: getLoadingStatus(state)
 })
 
 const mapDispatchToProps = {
@@ -53,14 +56,15 @@ class SegmentComparison extends Component {
             comparison,
             fields,
             itemA,
-            itemB
+            itemB,
+            isLoading
         } = this.props
 
         const { error } = this.state
 
         return (
             <LoadingAndErrorWrapper
-                loading={!comparison}
+                loading={isLoading || !hasComparison(comparison)}
                 error={error}
                 noBackground
             >

frontend/src/metabase/xray/containers/SegmentTableComparison.jsx

@@ -10,17 +10,20 @@ import {
     getComparisonFields,
     getSegmentItem,
     getTableItem,
-    getTitle
+    getTitle,
+    getLoadingStatus
 } from 'metabase/xray/selectors'
 
 import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
 import XRayComparison from 'metabase/xray/components/XRayComparison'
+import { hasComparison } from 'metabase/xray/utils'
 
 const mapStateToProps = state => ({
     comparison: getComparison(state),
     fields: getComparisonFields(state),
     itemA: getSegmentItem(state),
-    itemB: getTableItem(state)
+    itemB: getTableItem(state),
+    isLoading: getLoadingStatus(state)
 })
 
 const mapDispatchToProps = {
@@ -45,11 +48,11 @@ class SegmentTableComparison extends Component {
     }
 
     render () {
-        const { params, fields, comparison, itemA, itemB } = this.props
+        const { params, fields, comparison, itemA, itemB, isLoading } = this.props
         const { error } = this.state
         return (
             <LoadingAndErrorWrapper
-                loading={!comparison}
+                loading={isLoading || !hasComparison(comparison)}
                 error={error}
                 noBackground
             >

frontend/src/metabase/xray/containers/SegmentXRay.jsx

@@ -15,7 +15,8 @@ import CostSelect from 'metabase/xray/components/CostSelect'
 
 import {
     getSegmentConstituents,
-    getSegmentXray
+    getSegmentXray,
+    getLoadingStatus
 } from 'metabase/xray/selectors'
 
 import Constituent from 'metabase/xray/components/Constituent'
@@ -23,6 +24,8 @@ import Constituent from 'metabase/xray/components/Constituent'
 import type { Table } from 'metabase/meta/types/Table'
 import type { Segment } from 'metabase/meta/types/Segment'
 
+import { hasXray } from 'metabase/xray/utils'
+
 type Props = {
     fetchSegmentXray: () => void,
     constituents: [],
@@ -33,12 +36,14 @@ type Props = {
     params: {
         segmentId: number,
         cost: string,
-    }
+    },
+    isLoading: boolean
 }
 
 const mapStateToProps = state => ({
     xray: getSegmentXray(state),
-    constituents: getSegmentConstituents(state)
+    constituents: getSegmentConstituents(state),
+    isLoading: getLoadingStatus(state)
 })
 
 const mapDispatchToProps = {
@@ -76,12 +81,12 @@ class SegmentXRay extends Component {
     }
 
     render () {
-        const { constituents, xray, params } = this.props
+        const { constituents, xray, params, isLoading } = this.props
         const { error } = this.state
         return (
             <XRayPageWrapper>
                 <LoadingAndErrorWrapper
-                    loading={!constituents}
+                    loading={isLoading || !hasXray(xray)}
                     error={error}
                     noBackground
                 >

frontend/src/metabase/xray/containers/TableXRay.jsx

@@ -23,6 +23,8 @@ import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
 
 import type { Table } from 'metabase/meta/types/Table'
 
+import { hasXray } from 'metabase/xray/utils'
+
 type Props = {
     constituents: [],
     fetchTableXray: () => void,
@@ -83,7 +85,7 @@ class TableXRay extends Component {
         return (
             <XRayPageWrapper>
                 <LoadingAndErrorWrapper
-                    loading={isLoading}
+                    loading={isLoading || !hasXray(xray)}
                     error={error}
                     noBackground
                 >

frontend/src/metabase/xray/utils.js

@@ -12,3 +12,12 @@ export const distanceToPhrase = (distance) => {
         return 'Very similar'
     }
 }
+
+// Small utilities to determine whether we have an entity yet or not,
+// used for loading status
+function has (entity) {
+    return typeof entity !== 'undefined' ? true : false
+}
+
+export const hasXray = has
+export const hasComparison = has