Postpone scroll-to-detailed status after react components are loaded (m…

…astodon#9773)
ProjectMyosotis · Oct 2, 2019 · 9593dd8 · 9593dd8
1 parent 70c4e2f
commit 9593dd8
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
@@ -33,6 +33,17 @@ function main() {
   const Rellax = require('rellax');
   const createHistory = require('history').createBrowserHistory;
 
+  const scrollToDetailedStatus = () => {
+    const history = createHistory();
+    const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
+    const location = history.location;
+
+    if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
+      detailedStatuses[0].scrollIntoView();
+      history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
+    }
+  };
+
   ready(() => {
     const locale = document.documentElement.lang;
 
@@ -76,24 +87,21 @@ function main() {
 
           ReactDOM.render(<MediaContainer locale={locale} components={reactComponents} />, content);
           document.body.appendChild(content);
+          scrollToDetailedStatus();
         })
-        .catch(error => console.error(error));
+        .catch(error => {
+          console.error(error);
+          scrollToDetailedStatus();
+        });
+    } else {
+      scrollToDetailedStatus();
     }
 
     const parallaxComponents = document.querySelectorAll('.parallax');
 
     if (parallaxComponents.length > 0 ) {
       new Rellax('.parallax', { speed: -1 });
     }
-
-    const history = createHistory();
-    const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
-    const location = history.location;
-
-    if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
-      detailedStatuses[0].scrollIntoView();
-      history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
-    }
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {