fix(waittoscroll): fix waitToScroll functionality to ensure it fires …

…on server-side loads
alleyinteractive · Jun 10, 2021 · c6dbe36 · c6dbe36
1 parent 4c2c29e
commit c6dbe36
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/packages/core/sagas/index.js b/packages/core/sagas/index.js
@@ -1,6 +1,8 @@
 import { all, takeLatest, takeEvery } from 'redux-saga/effects';
 import {
   LOCATION_CHANGE,
+  RECEIVE_COMPONENTS,
+  FINISH_LOADING,
   REQUEST_COMPONENT_DATA,
 } from 'actions/types';
 import {
@@ -15,15 +17,20 @@ import watchComponentData from './componentDataSaga';
  * Combine all sagas, and run them continuously in parallel.
  */
 export default function* rootSaga() {
-  // Ensure authorized component requests are also made after initial server-side render.
+  // Set waitToScroll saga up first to ensure it functions properly for
+  // SSR loads that make a subsequent authorized request.
+  yield takeLatest([
+    RECEIVE_COMPONENTS,
+    FINISH_LOADING,
+  ], waitToScroll);
+
+  // Ensure authorized component requests and auto-scrolling
+  // are also made after initial server-side render.
   yield* resolveComponents();
 
-  yield all(
-    getValueFromConfig('sagas', [
-      takeLatest(LOCATION_CHANGE, resolveComponents),
-      takeLatest(LOCATION_CHANGE, waitToScroll),
-      takeEvery(LOCATION_CHANGE, onLocationChange),
-      takeEvery(REQUEST_COMPONENT_DATA, watchComponentData),
-    ]),
-  );
+  yield all(getValueFromConfig('sagas', [
+    takeLatest(LOCATION_CHANGE, resolveComponents),
+    takeEvery(LOCATION_CHANGE, onLocationChange),
+    takeEvery(REQUEST_COMPONENT_DATA, watchComponentData),
+  ]));
 }
diff --git a/packages/core/sagas/resolveComponents.js b/packages/core/sagas/resolveComponents.js
@@ -8,6 +8,7 @@ import {
   actionReceiveError,
   actionFinishLoading,
 } from 'actions';
+import waitToScroll from './waitToScroll';
 import getRouteMeta from 'selectors/getRouteMeta';
 import getRouteCookies from 'selectors/getRouteCookies';
 import cachedFetchComponents, {

diff --git a/packages/core/sagas/waitToScroll.js b/packages/core/sagas/waitToScroll.js
@@ -2,11 +2,8 @@ import {
   call,
   delay,
   select,
-  take,
 } from 'redux-saga/effects';
-import { FINISH_LOADING, RECEIVE_COMPONENTS } from 'actions/types';
 import getRouteMeta from 'selectors/getRouteMeta';
-import { shouldAuthorize } from 'utils/authorization';
 
 /**
  * Wrap requestAnimationFrame in a Promise.
@@ -28,7 +25,7 @@ function requestAnimationFramePromise() {
  * @returns {Element|null}
  */
 function* waitForEl(selector) {
-  const maxTries = 3;
+  const maxTries = 10;
   let tries = 0;
 
   while (tries < maxTries) {
@@ -51,18 +48,8 @@ function* waitForEl(selector) {
  * - Scroll to the top when history state changes.
  * - Scroll to id if url hash is present.
  */
- export default function* waitToScroll() {
-  const {
-    hash,
-    cached,
-    cookie,
-  } = yield select(getRouteMeta);
-  // Wait for new content to be received before scrolling.
-  if (!cached || shouldAuthorize(cookie)) {
-    yield take(RECEIVE_COMPONENTS);
-  } else {
-    yield take(FINISH_LOADING);
-  }
+export default function* waitToScroll() {
+  const { hash } = yield select(getRouteMeta);
 
   if (hash) {
     // Wait for rendering to complete, and then scroll to id.

diff --git a/packages/core/selectors/getRouteMeta.js b/packages/core/selectors/getRouteMeta.js
@@ -27,7 +27,9 @@ const getRouteMeta = createSelector(
       hostname: route.hostname,
       path: route.pathname,
       search: route.search,
-      hash: route.hash,
+      hash: route.hash || (
+        window.location ? window.location.hash : ''
+      ),
       cookie: cookies,
       context,
       cached: !!pageComponents.length,