Update Home Page content after cache hit (#2230)

packages/peregrine/lib/store/actions/app/actions.js

@@ -7,7 +7,8 @@ const actionTypes = [
     'SET_OFFLINE',
     'TOGGLE_SEARCH',
     'EXECUTE_SEARCH',
-    'MARK_ERROR_HANDLED'
+    'MARK_ERROR_HANDLED',
+    'SET_PAGE_LOADING'
 ];
 
 export default createActions(...actionTypes, { prefix });

packages/peregrine/lib/store/reducers/app.js

@@ -10,7 +10,8 @@ const initialState = {
     isOnline: navigator.onLine,
     overlay: false,
     searchOpen: false,
-    pending: {}
+    pending: {},
+    isPageLoading: false
 };
 
 const reducerMap = {
@@ -39,6 +40,12 @@ const reducerMap = {
             isOnline: false,
             hasBeenOffline: true
         };
+    },
+    [actions.setPageLoading]: (state, { payload }) => {
+        return {
+            ...state,
+            isPageLoading: !!payload
+        };
     }
 };
 

packages/peregrine/lib/talons/Header/__tests__/useHeader.spec.js

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { useHeader } from '../useHeader';
+import { createTestInstance } from '../../../index';
+import { act } from 'react-test-renderer';
+
+jest.mock('@magento/peregrine/lib/context/app', () => {
+    const api = {};
+    const state = {};
+    return {
+        useAppContext: jest.fn(() => [state, api])
+    };
+});
+
+const log = jest.fn();
+const Component = () => {
+    const talonProps = useHeader();
+
+    useEffect(() => {
+        log(talonProps);
+    }, [talonProps]);
+
+    return <div {...talonProps} id={'header'} />;
+};
+
+test('useHeader returns correct values from useAppContext', () => {
+    useAppContext.mockImplementation(() => {
+        return [
+            {
+                hasBeenOffline: false,
+                isOnline: true,
+                searchOpen: false,
+                isPageLoading: false
+            },
+            {
+                toggleSearch: jest.fn()
+            }
+        ];
+    });
+
+    createTestInstance(<Component />);
+
+    expect(log).toHaveBeenCalledWith({
+        handleSearchTriggerClick: expect.any(Function),
+        hasBeenOffline: false,
+        isOnline: true,
+        isPageLoading: false,
+        searchOpen: false
+    });
+});
+
+test('handleSearchTriggerClick calls toggleSearch from useAppContext', () => {
+    const toggleSearchFn = jest.fn();
+
+    useAppContext.mockImplementation(() => {
+        return [
+            {},
+            {
+                toggleSearch: toggleSearchFn
+            }
+        ];
+    });
+
+    const component = createTestInstance(<Component />);
+    const talonProps = component.root.findByProps({ id: 'header' }).props;
+
+    act(() => {
+        talonProps.handleSearchTriggerClick();
+    });
+
+    expect(toggleSearchFn).toHaveBeenCalled();
+});

packages/peregrine/lib/talons/Header/useHeader.js

@@ -3,7 +3,7 @@ import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 export const useHeader = () => {
     const [
-        { hasBeenOffline, isOnline, searchOpen },
+        { hasBeenOffline, isOnline, isPageLoading, searchOpen },
         { toggleSearch }
     ] = useAppContext();
 
@@ -15,6 +15,7 @@ export const useHeader = () => {
         handleSearchTriggerClick,
         hasBeenOffline,
         isOnline,
-        searchOpen
+        searchOpen,
+        isPageLoading
     };
 };

packages/venia-ui/lib/RootComponents/CMS/cms.js

@@ -9,6 +9,7 @@ import { Meta, Title } from '../../components/Head';
 import { mergeClasses } from '../../classify';
 
 import defaultClasses from './cms.css';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 const CMSPage = props => {
     const { id } = props;
@@ -17,8 +18,15 @@ const CMSPage = props => {
         variables: {
             id: Number(id),
             onServer: false
-        }
+        },
+        fetchPolicy: 'cache-and-network'
     });
+    const [
+        { isPageLoading },
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
 
     if (error) {
         if (process.env.NODE_ENV !== 'production') {
@@ -27,12 +35,15 @@ const CMSPage = props => {
         return <div>Page Fetch Error</div>;
     }
 
-    if (loading) {
+    if (!data) {
         return fullPageLoadingIndicator;
     }
 
-    if (!data) {
-        return null;
+    // Ensure we mark the page as loading while we check the network for updates
+    if (loading && !isPageLoading) {
+        setPageLoading(true);
+    } else if (!loading && isPageLoading) {
+        setPageLoading(false);
     }
 
     const { content_heading, title } = data.cmsPage;

packages/venia-ui/lib/components/Header/__tests__/__snapshots__/header.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`verify Header can render in default state 1`] = `
+<header
+  className="closed"
+>
+  <div
+    className="toolbar"
+  >
+    <div
+      className="primaryActions"
+    >
+      <NavTrigger />
+    </div>
+    <OnlineIndicator
+      hasBeenOffline={false}
+      isOnline={true}
+    />
+    <div
+      className="secondaryActions"
+    >
+      <SearchTrigger
+        active={false}
+        onClick={[MockFunction]}
+      />
+      <CartTrigger />
+    </div>
+  </div>
+</header>
+`;

packages/venia-ui/lib/components/Header/__tests__/header.spec.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import Header from '../header';
+import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
+
+jest.mock('../../../classify');
+jest.mock('../../Logo', () => 'Logo');
+jest.mock('../cartTrigger', () => 'CartTrigger');
+jest.mock('../navTrigger', () => 'NavTrigger');
+jest.mock('../searchTrigger', () => 'SearchTrigger');
+jest.mock('../onlineIndicator', () => 'OnlineIndicator');
+jest.mock('../../PageLoadingIndicator', () => () => (
+    <div id={'pageLoadingIndicator'} />
+));
+
+jest.mock('@magento/venia-drivers', () => ({
+    resourceUrl: jest.fn(url => url),
+    Link: jest.fn(() => null),
+    Route: jest.fn(() => null)
+}));
+
+jest.mock('@magento/peregrine/lib/talons/Header/useHeader', () => {
+    const state = {
+        handleSearchTriggerClick: jest.fn(),
+        hasBeenOffline: false,
+        isOnline: true,
+        searchOpen: false,
+        isPageLoading: false
+    };
+    return {
+        useHeader: jest.fn(() => state)
+    };
+});
+
+test('verify Header can render in default state', () => {
+    const component = createTestInstance(<Header />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('verify PageLoadingIndicator is displayed when page is loading', () => {
+    useHeader.mockImplementation(() => {
+        return {
+            handleSearchTriggerClick: jest.fn(),
+            hasBeenOffline: false,
+            isOnline: true,
+            searchOpen: false,
+            isPageLoading: true
+        };
+    });
+
+    const component = createTestInstance(<Header />);
+    component.root.findByProps({ id: 'pageLoadingIndicator' });
+});

packages/venia-ui/lib/components/Header/header.css

@@ -39,6 +39,9 @@
 .primaryActions {
     grid-area: primary;
     justify-self: start;
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
 }
 
 .secondaryActions {

packages/venia-ui/lib/components/Header/header.js

@@ -12,6 +12,7 @@ import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
 
 import { mergeClasses } from '../../classify';
 import defaultClasses from './header.css';
+import PageLoadingIndicator from '../PageLoadingIndicator';
 
 const SearchBar = React.lazy(() => import('../SearchBar'));
 
@@ -20,7 +21,8 @@ const Header = props => {
         handleSearchTriggerClick,
         hasBeenOffline,
         isOnline,
-        searchOpen
+        searchOpen,
+        isPageLoading
     } = useHeader();
 
     const classes = mergeClasses(defaultClasses, props.classes);
@@ -39,12 +41,16 @@ const Header = props => {
             </Route>
         </Suspense>
     ) : null;
+    const pageLoadingIndicator = isPageLoading ? (
+        <PageLoadingIndicator />
+    ) : null;
 
     return (
         <header className={rootClass}>
             <div className={classes.toolbar}>
                 <div className={classes.primaryActions}>
                     <NavTrigger />
+                    {pageLoadingIndicator}
                 </div>
                 <OnlineIndicator
                     hasBeenOffline={hasBeenOffline}

packages/venia-ui/lib/components/PageLoadingIndicator/index.js

@@ -0,0 +1 @@
+export { default } from './indicator';

packages/venia-ui/lib/components/PageLoadingIndicator/indicator.css

@@ -0,0 +1,17 @@
+.root {
+    justify-self: start;
+    animation: spin 1920ms linear infinite;
+}
+
+.indicator {
+    --stroke: rgb(var(--venia-text-hint));
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

packages/venia-ui/lib/components/PageLoadingIndicator/indicator.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import defaultClasses from './indicator.css';
+import { mergeClasses } from '../../classify';
+import { RotateCw as LoaderIcon } from 'react-feather';
+import Icon from '../Icon';
+
+const PageLoadingIndicator = props => {
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root}>
+            <Icon
+                src={LoaderIcon}
+                size={24}
+                classes={{ root: classes.indicator }}
+            />
+        </div>
+    );
+};
+
+export default PageLoadingIndicator;