Bug 1929378 - Newtab sections experiment handle loading and empty states r=home-newtab-reviewers,maxx

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

browser/components/newtab/content-src/components/Base/_Base.scss

@@ -97,6 +97,10 @@ main {
 
     .ds-card-grid:not(.ds-section-grid) {
       grid-gap: var(--space-large);
+
+      &.empty {
+        grid-template-columns: auto;
+      }
     }
 
     .body-wrapper {
@@ -114,7 +118,6 @@ main {
       .body-wrapper {
         width: 346px;
       }
-
     }
 
     @media (min-width: $break-point-layout-variant) {
@@ -127,7 +130,6 @@ main {
       .body-wrapper {
         width: 659px;
       }
-
     }
 
     @media (min-width: $break-point-widest) {
@@ -141,7 +143,6 @@ main {
       .body-wrapper {
         width: 989px;
       }
-
     }
 
     @media (min-width: $break-point-ultra-wide) {

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

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from "react";
 import { DSEmptyState } from "../DSEmptyState/DSEmptyState";
-import { DSCard } from "../DSCard/DSCard";
+import { DSCard, PlaceholderDSCard } from "../DSCard/DSCard";
 import { useSelector } from "react-redux";
 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
 import { useIntersectionObserver } from "../../../lib/hooks";
@@ -28,7 +28,7 @@ function CardSections({
   ctaButtonSponsors,
 }) {
   const { recommendations, sections } = data;
-  const isEmpty = recommendations?.length === 0 || !sections;
+  const isEmpty = !recommendations?.length || !sections;
 
   const prefs = useSelector(state => state.Prefs.values);
   const showTopics = prefs[PREF_TOPICS_ENABLED];
@@ -102,6 +102,13 @@ function CardSections({
         const { sectionKey, title, subtitle } = section;
         const { responsiveLayouts } = section.layout;
         const { maxTile } = getMaxTiles(responsiveLayouts);
+        const displaySections = section.data.slice(0, maxTile);
+        const isSectionEmpty = !displaySections?.length;
+
+        if (isSectionEmpty) {
+          return null;
+        }
+
         return (
           <section
             key={sectionKey}
@@ -119,6 +126,11 @@ function CardSections({
               {section.data.slice(0, maxTile).map((rec, index) => {
                 const layoutData = getLayoutData(responsiveLayouts, index);
                 const { classNames, position } = layoutData;
+
+                if (!rec || rec.placeholder) {
+                  return <PlaceholderDSCard key={`dscard-${index}`} />;
+                }
+
                 return (
                   <DSCard
                     key={`dscard-${rec.id}`}

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss

@@ -5,6 +5,10 @@
   height: $card-height-compact;
   width: 100%;
 
+  @media (min-width: $break-point-sections-variant) {
+    width: 936px;
+  }
+
   .empty-state-message {
     color: var(--newtab-text-secondary-color);
     font-size: 14px;

browser/components/newtab/content-src/lib/selectLayoutRender.mjs

@@ -100,6 +100,14 @@ export const selectLayoutRender = ({ state = {}, prefs = {} }) => {
     }
     const data = {
       recommendations: [],
+      sections: [
+        {
+          layout: {
+            responsiveLayouts: [],
+          },
+          data: [],
+        },
+      ],
     };
 
     let items = 0;
@@ -110,11 +118,18 @@ export const selectLayoutRender = ({ state = {}, prefs = {} }) => {
       data.recommendations.push({ placeholder: true });
     }
 
+    const sectionsEnabled = prefs["discoverystream.sections.enabled"];
+    if (sectionsEnabled) {
+      for (let i = 0; i < items; i++) {
+        data.sections[0].data.push({ placeholder: true });
+      }
+    }
+
     return { ...component, data };
   };
 
   // TODO update devtools to show placements
-  const handleSpocs = (data, spocsPositions, spocsPlacement) => {
+  const handleSpocs = (data = [], spocsPositions, spocsPlacement) => {
     let result = [...data];
     // Do we ever expect to possibly have a spoc.
     if (spocsPositions?.length) {

browser/components/newtab/css/activity-stream.css

@@ -533,6 +533,10 @@ main section {
 .layout-variant-b .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) {
   grid-gap: var(--space-large);
 }
+.layout-variant-a .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid).empty,
+.layout-variant-b .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid).empty {
+  grid-template-columns: auto;
+}
 .layout-variant-a .ds-outer-wrapper-breakpoint-override main .body-wrapper,
 .layout-variant-b .ds-outer-wrapper-breakpoint-override main .body-wrapper {
   width: 346px;
@@ -6155,6 +6159,11 @@ main section {
   height: 160px;
   width: 100%;
 }
+@media (min-width: 1390px) {
+  .section-empty-state {
+    width: 936px;
+  }
+}
 .section-empty-state .empty-state-message {
   color: var(--newtab-text-secondary-color);
   font-size: 14px;

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

@@ -9262,6 +9262,14 @@ const selectLayoutRender = ({ state = {}, prefs = {} }) => {
     }
     const data = {
       recommendations: [],
+      sections: [
+        {
+          layout: {
+            responsiveLayouts: [],
+          },
+          data: [],
+        },
+      ],
     };
 
     let items = 0;
@@ -9272,11 +9280,18 @@ const selectLayoutRender = ({ state = {}, prefs = {} }) => {
       data.recommendations.push({ placeholder: true });
     }
 
+    const sectionsEnabled = prefs["discoverystream.sections.enabled"];
+    if (sectionsEnabled) {
+      for (let i = 0; i < items; i++) {
+        data.sections[0].data.push({ placeholder: true });
+      }
+    }
+
     return { ...component, data };
   };
 
   // TODO update devtools to show placements
-  const handleSpocs = (data, spocsPositions, spocsPlacement) => {
+  const handleSpocs = (data = [], spocsPositions, spocsPlacement) => {
     let result = [...data];
     // Do we ever expect to possibly have a spoc.
     if (spocsPositions?.length) {
@@ -9560,7 +9575,7 @@ function CardSections({
     recommendations,
     sections
   } = data;
-  const isEmpty = recommendations?.length === 0 || !sections;
+  const isEmpty = !recommendations?.length || !sections;
   const prefs = (0,external_ReactRedux_namespaceObject.useSelector)(state => state.Prefs.values);
   const showTopics = prefs[CardSections_PREF_TOPICS_ENABLED];
   const mayHaveSectionsCards = prefs[PREF_SECTIONS_CARDS_ENABLED];
@@ -9628,6 +9643,11 @@ function CardSections({
     const {
       maxTile
     } = getMaxTiles(responsiveLayouts);
+    const displaySections = section.data.slice(0, maxTile);
+    const isSectionEmpty = !displaySections?.length;
+    if (isSectionEmpty) {
+      return null;
+    }
     return /*#__PURE__*/external_React_default().createElement("section", {
       key: sectionKey,
       id: sectionKey,
@@ -9649,6 +9669,11 @@ function CardSections({
         classNames,
         position
       } = layoutData;
+      if (!rec || rec.placeholder) {
+        return /*#__PURE__*/external_React_default().createElement(PlaceholderDSCard, {
+          key: `dscard-${index}`
+        });
+      }
       return /*#__PURE__*/external_React_default().createElement(DSCard, {
         key: `dscard-${rec.id}`,
         pos: rec.pos,