Bug 1620670 - Remove dismiss jank for collections. r=gvn

Differential Revision: https://phabricator.services.mozilla.com/D65793

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CollectionCardGrid/CollectionCardGrid.jsx

@@ -12,11 +12,17 @@ export class CollectionCardGrid extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onDismissClick = this.onDismissClick.bind(this);
+    this.state = {
+      dismissed: false,
+    };
   }
 
   onDismissClick() {
     const { data } = this.props;
     if (this.props.dispatch && data && data.spocs && data.spocs.length) {
+      this.setState({
+        dismissed: true,
+      });
       const pos = 0;
       const source = this.props.type.toUpperCase();
       // Grab the available items in the array to dismiss.
@@ -47,6 +53,7 @@ export class CollectionCardGrid extends React.PureComponent {
   render() {
     const { data, dismissible } = this.props;
     if (
+      this.state.dismissed ||
       !data ||
       !data.spocs ||
       !data.spocs[0] ||

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -6310,6 +6310,9 @@ class CollectionCardGrid extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
   constructor(props) {
     super(props);
     this.onDismissClick = this.onDismissClick.bind(this);
+    this.state = {
+      dismissed: false
+    };
   }
 
   onDismissClick() {
@@ -6318,6 +6321,9 @@ class CollectionCardGrid extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
     } = this.props;
 
     if (this.props.dispatch && data && data.spocs && data.spocs.length) {
+      this.setState({
+        dismissed: true
+      });
       const pos = 0;
       const source = this.props.type.toUpperCase(); // Grab the available items in the array to dismiss.
       // This fires a ping for all items available, even if below the fold.
@@ -6352,7 +6358,7 @@ class CollectionCardGrid extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
       dismissible
     } = this.props;
 
-    if (!data || !data.spocs || !data.spocs[0] || // We only display complete collections.
+    if (this.state.dismissed || !data || !data.spocs || !data.spocs[0] || // We only display complete collections.
     data.spocs.length < 3) {
       return null;
     }