PWA-471: Update Home Page content after cache hit (magento#2230)

magento-obsessive-owls · Jun 11, 2020 · f2f6c64 · f2f6c64
1 parent 9998446
commit f2f6c64
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 12 deletions.
diff --git a/packages/peregrine/lib/store/actions/app/asyncActions.js b/packages/peregrine/lib/store/actions/app/asyncActions.js
@@ -8,6 +8,3 @@ export const closeDrawer = () => async dispatch =>
 
 export const toggleSearch = () => async dispatch =>
     dispatch(actions.toggleSearch());
-
-export const setPageLoading = pageLoading => async dispatch =>
-    dispatch(actions.setPageLoading(pageLoading));
diff --git a/packages/peregrine/lib/store/reducers/app.js b/packages/peregrine/lib/store/reducers/app.js
@@ -44,7 +44,7 @@ const reducerMap = {
     [actions.setPageLoading]: (state, { payload }) => {
         return {
             ...state,
-            isPageLoading: payload
+            isPageLoading: !!payload
         };
     }
 };

diff --git a/packages/peregrine/lib/talons/Header/useHeader.js b/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, isPageLoading },
+        { hasBeenOffline, isOnline, isPageLoading, searchOpen },
         { toggleSearch }
     ] = useAppContext();
 

diff --git a/packages/venia-ui/lib/RootComponents/CMS/cms.js b/packages/venia-ui/lib/RootComponents/CMS/cms.js
@@ -21,7 +21,12 @@ const CMSPage = props => {
         },
         fetchPolicy: 'cache-and-network'
     });
-    const [{ isPageLoading }, { setPageLoading }] = useAppContext();
+    const [
+        { isPageLoading },
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
 
     if (error) {
         if (process.env.NODE_ENV !== 'production') {
@@ -35,9 +40,9 @@ const CMSPage = props => {
     }
 
     // Ensure we mark the page as loading while we check the network for updates
-    if (loading && data && !isPageLoading) {
+    if (loading && !isPageLoading) {
         setPageLoading(true);
-    } else if (!loading && data && isPageLoading) {
+    } else if (!loading && isPageLoading) {
         setPageLoading(false);
     }
 

diff --git a/packages/venia-ui/lib/components/Header/header.css b/packages/venia-ui/lib/components/Header/header.css
@@ -40,7 +40,7 @@
     grid-area: primary;
     justify-self: start;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: column;
     align-items: center;
 }
 

diff --git a/packages/venia-ui/lib/components/Header/header.js b/packages/venia-ui/lib/components/Header/header.js
@@ -41,14 +41,16 @@ const Header = props => {
             </Route>
         </Suspense>
     ) : null;
-    const pageLoading = isPageLoading ? <PageLoadingIndicator /> : null;
+    const pageLoadingIndicator = isPageLoading ? (
+        <PageLoadingIndicator />
+    ) : null;
 
     return (
         <header className={rootClass}>
             <div className={classes.toolbar}>
                 <div className={classes.primaryActions}>
                     <NavTrigger />
-                    {pageLoading}
+                    {pageLoadingIndicator}
                 </div>
                 <OnlineIndicator
                     hasBeenOffline={hasBeenOffline}

diff --git a/packages/venia-ui/lib/components/PageLoadingIndicator/indicator.css b/packages/venia-ui/lib/components/PageLoadingIndicator/indicator.css
@@ -1,9 +1,9 @@
 .root {
     justify-self: start;
+    animation: spin 1920ms linear infinite;
 }
 
 .indicator {
-    animation: spin 0.75s linear infinite;
     color: rgb(var(--venia-text-hint));
 }