diff --git a/packages/ui-app/src/CardGrid.tsx b/packages/ui-app/src/CardGrid.tsx
index e50fc0938f..74dc6891d5 100644
--- a/packages/ui-app/src/CardGrid.tsx
+++ b/packages/ui-app/src/CardGrid.tsx
@@ -14,14 +14,12 @@ type Props = CollectionProps;
 type State = CollectionState;
 
 class CardGrid extends Collection<Props, State> {
-  public static getDerivedStateFromProps ({ children, headerText }: Props): State {
-    const isEmpty = !children || (Array.isArray(children) && !children.length);
+  public static getDerivedStateFromProps (props: Props): State {
+    const state = super.getDerivedStateFromProps(props);
 
     return {
-      isEmpty: isEmpty,
-      showHeader: isEmpty
-        ? !!headerText
-        : true
+      ...state,
+      showHeader: !state.isEmpty || !!props.headerText
     };
   }
 
diff --git a/packages/ui-app/src/Collection.tsx b/packages/ui-app/src/Collection.tsx
index 52abfda2fb..df3a6f0baf 100644
--- a/packages/ui-app/src/Collection.tsx
+++ b/packages/ui-app/src/Collection.tsx
@@ -53,9 +53,9 @@ export default class Collection<P extends CollectionProps, S extends CollectionS
     return !children || (Array.isArray(children) && children.length === 0);
   }
 
-  public static getDerivedStateFromProps ({ children }: CollectionProps): Pick<any, never> {
+  public static getDerivedStateFromProps ({ isEmpty, children }: CollectionProps): CollectionState {
     return {
-      isEmpty: Collection.isEmpty(children)
+      isEmpty: isEmpty === undefined ? Collection.isEmpty(children) : isEmpty
     };
   }