From c6dbe3609d5d1b84445bce20192b99a7bba8d245 Mon Sep 17 00:00:00 2001
From: Owen Stowe <ostowe@gmail.com>
Date: Tue, 8 Jun 2021 17:53:05 -0400
Subject: [PATCH] fix(waittoscroll): fix waitToScroll functionality to ensure
 it fires on server-side loads

---
 packages/core/sagas/index.js             | 25 +++++++++++++++---------
 packages/core/sagas/resolveComponents.js |  1 +
 packages/core/sagas/waitToScroll.js      | 19 +++---------------
 packages/core/selectors/getRouteMeta.js  |  4 +++-
 4 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/core/sagas/index.js b/packages/core/sagas/index.js
index 489c38d82c..be3fc0b01e 100644
--- 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
index 22b10d6694..fdc573028f 100644
--- 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
index 93a8f00bc6..1a159a9117 100644
--- 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
index f024131afb..4bc1b3b7ca 100644
--- 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,