Add fetched selector and use in EntityListLoader

frontend/src/metabase/entities/containers/EntityListLoader.jsx

@@ -27,6 +27,7 @@ export type RenderProps = {
 @entityType()
 @connect((state, { entityDef, entityQuery }) => ({
   list: entityDef.selectors.getList(state, { entityQuery }),
+  fetched: entityDef.selectors.getFetched(state, { entityQuery }),
   loading: entityDef.selectors.getLoading(state, { entityQuery }),
   error: entityDef.selectors.getError(state, { entityQuery }),
 }))
@@ -84,10 +85,10 @@ export default class EntityListLoader extends React.Component {
 
   render() {
     // $FlowFixMe: provided by @connect
-    const { loading, error, loadingAndErrorWrapper } = this.props;
+    const { fetched, loading, error, loadingAndErrorWrapper } = this.props;
     return loadingAndErrorWrapper ? (
       <LoadingAndErrorWrapper
-        loading={loading}
+        loading={!fetched && loading}
         error={error}
         children={this.renderChildren}
       />

frontend/src/metabase/lib/entities.js

@@ -68,6 +68,7 @@ export type Entity = {
     getList: Function,
     getObject: Function,
     getLoading: Function,
+    getFetched: Function,
     getError: Function,
   },
   objectActions: {
@@ -275,17 +276,25 @@ export function createEntity(def: EntityDefinition): Entity {
 
   // REQUEST STATE SELECTORS
 
-  const getRequestState = (state, props = {}) => {
-    const path =
-      props.entityId != null
-        ? getObjectStatePath(props.entityId)
-        : getListStatePath(props.entityQuery);
-    return getIn(state, ["requests", "states", ...path, "fetch"]);
-  };
+  const getStatePath = props =>
+    props.entityId != null
+      ? getObjectStatePath(props.entityId)
+      : getListStatePath(props.entityQuery);
+
+  const getRequestState = (state, props = {}) =>
+    getIn(state, ["requests", "states", ...getStatePath(props), "fetch"]);
+
+  const getFetchState = (state, props = {}) =>
+    getIn(state, ["requests", "fetched", ...getStatePath(props)]);
+
   const getLoading = createSelector(
     [getRequestState],
     requestState => (requestState ? requestState.state === "LOADING" : true),
   );
+  const getFetched = createSelector(
+    [getFetchState],
+    fetchState => !!fetchState,
+  );
   const getError = createSelector(
     [getRequestState],
     requestState => (requestState ? requestState.error : null),
@@ -294,6 +303,7 @@ export function createEntity(def: EntityDefinition): Entity {
   entity.selectors = {
     getList,
     getObject,
+    getFetched,
     getLoading,
     getError,
   };

frontend/src/metabase/redux/requests.js

@@ -10,6 +10,26 @@ const CLEAR_REQUEST_STATE = "metabase/requests/CLEAR_REQUEST_STATE";
 export const setRequestState = createAction(SET_REQUEST_STATE);
 export const clearRequestState = createAction(CLEAR_REQUEST_STATE);
 
+// e.x. for statePath ["a", "b", "fetch"]
+//
+// {
+//   states: {
+//     a: {
+//       b: {
+//         fetch: {
+//           state: "LOADING"|"LOADED",
+//           error: ...
+//         }
+//       }
+//     }
+//   }
+//   fetched: {
+//     a: {
+//       b: true
+//     }
+//   }
+// }
+
 // For a given state path, returns the current request state ("LOADING", "LOADED" or a request error)
 export const states = handleActions(
   {