@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/RootComponents/Category/__tests__/categoryContent.spec.js

@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { createTestInstance } from '@magento/peregrine';
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
+
 import CategoryContent from '../categoryContent';
 
 jest.mock('@magento/venia-ui/lib/classify');
@@ -12,6 +15,7 @@ jest.mock('@magento/peregrine/lib/context/app', () => {
     const useAppContext = jest.fn(() => [state, api]);
     return { useAppContext };
 });
+jest.mock('@magento/peregrine/lib/hooks/useIsInViewport');
 
 jest.mock('../../../components/Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
@@ -23,13 +27,33 @@ jest.mock('@magento/peregrine/lib/talons/RootComponents/Category', () => ({
 }));
 
 jest.mock('../../../components/Breadcrumbs', () => 'Breadcrumbs');
-jest.mock('../../../components/Gallery', () => 'Gallery');
+jest.mock('../../../components/Gallery', () => ({
+    __esModule: true,
+    default: 'Gallery',
+    GalleryShimmer: 'GalleryShimmer'
+}));
 jest.mock('../../../components/Pagination', () => 'Pagination');
-jest.mock('../../../components/SortedByContainer', () => 'SortedByContainer');
-jest.mock(
-    '../../../components/FilterModalOpenButton',
-    () => 'FilterModalOpenButton'
-);
+jest.mock('../../../components/Shimmer', () => 'Shimmer');
+jest.mock('../../../components/ProductSort', () => ({
+    __esModule: true,
+    default: 'ProductSort',
+    ProductSortShimmer: 'ProductSortShimmer'
+}));
+jest.mock('../../../components/SortedByContainer', () => ({
+    __esModule: true,
+    default: 'SortedByContainer',
+    SortedByContainerShimmer: 'SortedByContainerShimmer'
+}));
+jest.mock('../../../components/FilterModalOpenButton', () => ({
+    __esModule: true,
+    default: 'FilterModalOpenButton',
+    FilterModalOpenButtonShimmer: 'FilterModalOpenButtonShimmer'
+}));
+jest.mock('../../../components/FilterSidebar', () => ({
+    __esModule: true,
+    default: 'FilterSidebar',
+    FilterSidebarShimmer: 'FilterSidebarShimmer'
+}));
 jest.mock('../NoProductsFound', () => 'NoProductsFound');
 
 const defaultProps = {
@@ -118,6 +142,28 @@ describe('filter button/modal', () => {
     });
 });
 
+describe('filter sidebar', () => {
+    test('does not render if not in viewport', () => {
+        useCategoryContent.mockReturnValueOnce({
+            ...talonProps,
+            filters: [{}]
+        });
+        useIsInViewport.mockReturnValue(false);
+        const tree = createTestInstance(<CategoryContent {...defaultProps} />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders when in viewport', () => {
+        useCategoryContent.mockReturnValueOnce({
+            ...talonProps,
+            filters: [{}]
+        });
+        useIsInViewport.mockReturnValue(true);
+        const tree = createTestInstance(<CategoryContent {...defaultProps} />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});
+
 describe('sort button/container', () => {
     test('does not render if there are no products', () => {
         useCategoryContent.mockReturnValueOnce({

package/lib/RootComponents/Category/category.js

@@ -4,7 +4,7 @@ import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Catego
 import { useStyle } from '../../classify';
 
 import CategoryContent from './categoryContent';
-import defaultClasses from './category.css';
+import defaultClasses from './category.module.css';
 import { Meta } from '../../components/Head';
 import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';

package/lib/RootComponents/Category/{category.css → category.module.css}

@@ -38,9 +38,11 @@
 }
 
 .categoryInfo {
+    flex-basis: 100%;
     line-height: var(--venia-global-typography-heading-lineHeight);
     margin: 1rem 0;
     max-width: 75vw;
+    text-align: center;
 }
 
 .headerButtons {
@@ -84,7 +86,7 @@
 
     .categoryInfo {
         margin: 0;
-        flex-basis: 100%;
+        text-align: left;
     }
 
     .sidebar {

package/lib/RootComponents/Category/categoryContent.js

@@ -1,20 +1,27 @@
-import React, { Fragment, Suspense, useMemo } from 'react';
+import React, { Fragment, Suspense, useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
+
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
 
 import { useStyle } from '../../classify';
 import Breadcrumbs from '../../components/Breadcrumbs';
-import Gallery from '../../components/Gallery';
+import FilterModalOpenButton, {
+    FilterModalOpenButtonShimmer
+} from '../../components/FilterModalOpenButton';
+import { FilterSidebarShimmer } from '../../components/FilterSidebar';
+import Gallery, { GalleryShimmer } from '../../components/Gallery';
 import { StoreTitle } from '../../components/Head';
 import Pagination from '../../components/Pagination';
-import ProductSort from '../../components/ProductSort';
+import ProductSort, { ProductSortShimmer } from '../../components/ProductSort';
 import RichContent from '../../components/RichContent';
-import defaultClasses from './category.css';
+import Shimmer from '../../components/Shimmer';
+import SortedByContainer, {
+    SortedByContainerShimmer
+} from '../../components/SortedByContainer';
+import defaultClasses from './category.module.css';
 import NoProductsFound from './NoProductsFound';
-import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
-import SortedByContainer from '../../components/SortedByContainer';
-import FilterModalOpenButton from '../../components/FilterModalOpenButton';
 
 const FilterModal = React.lazy(() => import('../../components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -47,15 +54,23 @@ const CategoryContent = props => {
         totalPagesFromData
     } = talonProps;
 
+    const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
+    const shouldRenderSidebarContent = useIsInViewport({
+        elementRef: sidebarRef
+    });
 
     const shouldShowFilterButtons = filters && filters.length;
+    const shouldShowFilterShimmer = filters === null;
 
     // If there are no products we can hide the sort button.
     const shouldShowSortButtons = totalPagesFromData;
+    const shouldShowSortShimmer = !totalPagesFromData && isLoading;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (
         <FilterModalOpenButton filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterModalOpenButtonShimmer />
     ) : null;
 
     const filtersModal = shouldShowFilterButtons ? (
@@ -64,14 +79,20 @@ const CategoryContent = props => {
 
     const sidebar = shouldShowFilterButtons ? (
         <FilterSidebar filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterSidebarShimmer />
     ) : null;
 
     const maybeSortButton = shouldShowSortButtons ? (
         <ProductSort sortProps={sortProps} />
+    ) : shouldShowSortShimmer ? (
+        <ProductSortShimmer />
     ) : null;
 
     const maybeSortContainer = shouldShowSortButtons ? (
         <SortedByContainer currentSort={currentSort} />
+    ) : shouldShowSortShimmer ? (
+        <SortedByContainerShimmer />
     ) : null;
 
     const categoryResultsHeading =
@@ -83,6 +104,8 @@ const CategoryContent = props => {
                 }}
                 defaultMessage={'{count} Results'}
             />
+        ) : isLoading ? (
+            <Shimmer width={5} />
         ) : null;
 
     const categoryDescriptionElement = categoryDescription ? (
@@ -90,24 +113,26 @@ const CategoryContent = props => {
     ) : null;
 
     const content = useMemo(() => {
-        if (totalPagesFromData) {
-            return (
-                <Fragment>
-                    <section className={classes.gallery}>
-                        <Gallery items={items} />
-                    </section>
-                    <div className={classes.pagination}>
-                        <Pagination pageControl={pageControl} />
-                    </div>
-                </Fragment>
-            );
-        } else {
-            if (isLoading) {
-                return fullPageLoadingIndicator;
-            } else {
-                return <NoProductsFound categoryId={categoryId} />;
-            }
+        if (!totalPagesFromData && !isLoading) {
+            return <NoProductsFound categoryId={categoryId} />;
         }
+
+        const gallery = totalPagesFromData ? (
+            <Gallery items={items} />
+        ) : (
+            <GalleryShimmer items={items} />
+        );
+
+        const pagination = totalPagesFromData ? (
+            <Pagination pageControl={pageControl} />
+        ) : null;
+
+        return (
+            <Fragment>
+                <section className={classes.gallery}>{gallery}</section>
+                <div className={classes.pagination}>{pagination}</div>
+            </Fragment>
+        );
     }, [
         categoryId,
         classes.gallery,
@@ -118,6 +143,8 @@ const CategoryContent = props => {
         totalPagesFromData
     ]);
 
+    const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
+
     return (
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
@@ -126,14 +153,16 @@ const CategoryContent = props => {
                 <div className={classes.categoryHeader}>
                     <h1 className={classes.title}>
                         <div className={classes.categoryTitle}>
-                            {categoryName || '...'}
+                            {categoryTitle}
                         </div>
                     </h1>
                     {categoryDescriptionElement}
                 </div>
                 <div className={classes.contentWrapper}>
-                    <div className={classes.sidebar}>
-                        <Suspense fallback={null}>{sidebar}</Suspense>
+                    <div ref={sidebarRef} className={classes.sidebar}>
+                        <Suspense fallback={<FilterSidebarShimmer />}>
+                            {shouldRenderSidebarContent ? sidebar : null}
+                        </Suspense>
                     </div>
                     <div className={classes.categoryContent}>
                         <div className={classes.heading}>
@@ -159,14 +188,17 @@ export default CategoryContent;
 
 CategoryContent.propTypes = {
     classes: shape({
-        filterContainer: string,
-        sortContainer: string,
         gallery: string,
-        headerButtons: string,
-        filterButton: string,
         pagination: string,
         root: string,
-        title: string
+        categoryHeader: string,
+        title: string,
+        categoryTitle: string,
+        sidebar: string,
+        categoryContent: string,
+        heading: string,
+        categoryInfo: string,
+        headerButtons: string
     }),
     // sortProps contains the following structure:
     // [{sortDirection: string, sortAttribute: string, sortText: string},

package/lib/RootComponents/Category/categoryContent.shimmer.js

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+
+import { useStyle } from '../../classify';
+import BreadcrumbsShimmer from '../../components/Breadcrumbs/breadcrumbs.shimmer';
+import { FilterModalOpenButtonShimmer } from '../../components/FilterModalOpenButton';
+import { FilterSidebarShimmer } from '../../components/FilterSidebar';
+import { GalleryShimmer } from '../../components/Gallery';
+import { ProductSortShimmer } from '../../components/ProductSort';
+import Shimmer from '../../components/Shimmer';
+import { SortedByContainerShimmer } from '../../components/SortedByContainer';
+import defaultClasses from './category.module.css';
+
+const CategoryContentShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const placeholderItems = Array.from({ length: 6 }).fill(null);
+
+    return (
+        <Fragment>
+            <BreadcrumbsShimmer />
+            <article className={classes.root}>
+                <div className={classes.categoryHeader}>
+                    <h1 className={classes.title}>
+                        <div className={classes.categoryTitle}>
+                            <Shimmer width={5} />
+                        </div>
+                    </h1>
+                </div>
+                <div className={classes.contentWrapper}>
+                    <div className={classes.sidebar}>
+                        <FilterSidebarShimmer />
+                    </div>
+                    <div className={classes.categoryContent}>
+                        <div className={classes.heading}>
+                            <div className={classes.categoryInfo}>
+                                <Shimmer width={5} />
+                            </div>
+                            <div className={classes.headerButtons}>
+                                <FilterModalOpenButtonShimmer />
+                                <ProductSortShimmer />
+                            </div>
+                            <SortedByContainerShimmer />
+                        </div>
+                        <section className={classes.gallery}>
+                            <GalleryShimmer items={placeholderItems} />
+                        </section>
+                    </div>
+                </div>
+            </article>
+        </Fragment>
+    );
+};
+
+CategoryContentShimmer.defaultProps = {
+    classes: {}
+};
+
+CategoryContentShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        categoryHeader: string,
+        title: string,
+        categoryTitle: string,
+        sidebar: string,
+        categoryContent: string,
+        heading: string,
+        categoryInfo: string,
+        headerButtons: string,
+        gallery: string
+    })
+};
+
+export default CategoryContentShimmer;

package/lib/RootComponents/Product/__tests__/__snapshots__/product.shimmer.spec.js.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Product Shimmer renders product options when product is configurable 1`] = `
+Array [
+  <BreadcrumbShimmer />,
+  <div>
+    <section>
+      <Shimmer
+        height={2}
+        width="100%"
+      />
+      <div>
+        <Shimmer
+          height={2}
+          width={3}
+        />
+      </div>
+    </section>
+    <section>
+      <Carousel />
+    </section>
+    <section>
+      ProductOptionsShimmer
+    </section>
+    <section>
+      <div>
+        <Shimmer
+          height={1}
+          width="100%"
+        />
+      </div>
+      <Shimmer
+        classes={
+          Object {
+            "root": undefined,
+          }
+        }
+        type="textInput"
+        width={10}
+      />
+    </section>
+    <section>
+      <Shimmer
+        type="button"
+      />
+    </section>
+    <section>
+      <div>
+        <Shimmer
+          height={1}
+          width="100%"
+        />
+      </div>
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+    </section>
+    <section>
+      <div>
+        <Shimmer
+          height={1}
+          width="100%"
+        />
+      </div>
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+    </section>
+  </div>,
+]
+`;
+
+exports[`#Product Shimmer renders shimmer without options for simple product 1`] = `
+Array [
+  <BreadcrumbShimmer />,
+  <div>
+    <section>
+      <Shimmer
+        height={2}
+        width="100%"
+      />
+      <div>
+        <Shimmer
+          height={2}
+          width={3}
+        />
+      </div>
+    </section>
+    <section>
+      <Carousel />
+    </section>
+    <section />
+    <section>
+      <div>
+        <Shimmer
+          height={1}
+          width="100%"
+        />
+      </div>
+      <Shimmer
+        classes={
+          Object {
+            "root": undefined,
+          }
+        }
+        type="textInput"
+        width={10}
+      />
+    </section>
+    <section>
+      <Shimmer
+        type="button"
+      />
+    </section>
+    <section>
+      <div>
+        <Shimmer
+          height={1}
+          width="100%"
+        />
+      </div>
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+    </section>
+    <section>
+      <div>
+        <Shimmer
+          height={1}
+          width="100%"
+        />
+      </div>
+      <Shimmer
+        height={1}
+        width="100%"
+      />
+    </section>
+  </div>,
+]
+`;

package/lib/RootComponents/Product/__tests__/__snapshots__/product.spec.js.snap

@@ -1,14 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders product page correctly 1`] = `
-<React.Fragment>
-  <StoreTitle>
-    Fitted Dress with Belt
-  </StoreTitle>
-  <Meta
-    content="Team these printed palazzo pants with a solid tank top and summer-ready sandals"
-    name="description"
-  />
+Array [
+  "StoreTitle",
+  "Meta",
   <ProductFullDetail
     product={
       Object {
@@ -93,19 +88,14 @@ exports[`renders product page correctly 1`] = `
         "price": "$160.00",
       }
     }
-  />
-</React.Fragment>
+  />,
+]
 `;
 
 exports[`renders product page correctly when error and product data exist 1`] = `
-<React.Fragment>
-  <StoreTitle>
-    Fitted Dress with Belt
-  </StoreTitle>
-  <Meta
-    content="Team these printed palazzo pants with a solid tank top and summer-ready sandals"
-    name="description"
-  />
+Array [
+  "StoreTitle",
+  "Meta",
   <ProductFullDetail
     product={
       Object {
@@ -190,8 +180,8 @@ exports[`renders product page correctly when error and product data exist 1`] =
         "price": "$160.00",
       }
     }
-  />
-</React.Fragment>
+  />,
+]
 `;
 
 exports[`renders product page failed when error data 1`] = `<ErrorView />`;

package/lib/RootComponents/Product/__tests__/product.shimmer.spec.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import ProductShimmer from '../product.shimmer';
+import { ProductOptionsShimmer } from '../../../components/ProductOptions';
+
+jest.mock('../../../components/Breadcrumbs', () => ({
+    __esModule: true,
+    default: 'Breadcrumbs',
+    BreadcrumbShimmer: 'BreadcrumbShimmer'
+}));
+jest.mock(
+    '../../../components/ProductImageCarousel/carousel.shimmer',
+    () => 'Carousel'
+);
+jest.mock('../../../components/ProductOptions', () => ({
+    __esModule: true,
+    default: 'ProductOptions',
+    ProductOptionsShimmer: jest.fn(() => 'ProductOptionsShimmer')
+}));
+jest.mock('../../../components/Shimmer', () => 'Shimmer');
+jest.mock('../../../classify', () => ({
+    useStyle: (...classes) => Object.assign({}, ...classes)
+}));
+
+const render = async (props = {}) => {
+    let tree;
+
+    await act(() => {
+        tree = create(<ProductShimmer {...props} />);
+    });
+
+    return tree;
+};
+
+describe('#Product Shimmer', () => {
+    test('renders shimmer without options for simple product', async () => {
+        const tree = await render({ productType: 'SimpleProduct' });
+
+        expect(ProductOptionsShimmer).not.toHaveBeenCalled();
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('renders product options when product is configurable', async () => {
+        const tree = await render({ productType: 'ConfigurableProduct' });
+
+        expect(ProductOptionsShimmer).toHaveBeenCalled();
+        expect(tree).toMatchSnapshot();
+    });
+});