From 7632d39e1dc09015a5e7a0fbfc7d218bdfda9785 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 11:40:36 +0300
Subject: [PATCH] delay render of nested suspenders

---
 src/common/coreSuspender.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/common/coreSuspender.js b/src/common/coreSuspender.js
index bfb8d1893..fead5ae1f 100644
--- a/src/common/coreSuspender.js
+++ b/src/common/coreSuspender.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const { useServices } = require('stremio/services');
 
-const CoreSuspenderContext = React.createContext();
+const CoreSuspenderContext = React.createContext(null);
 
 CoreSuspenderContext.displayName = 'CoreSuspenderContext';
 
@@ -31,9 +31,15 @@ function wrapPromise(promise) {
     };
 }
 
+const useCoreSuspender = () => {
+    return React.useContext(CoreSuspenderContext);
+};
+
 const withCoreSuspender = (Component, Fallback = () => { }) => {
     return function withCoreSuspender(props) {
         const { core } = useServices();
+        const parentSuspender = useCoreSuspender();
+        const [render, setRender] = React.useState(parentSuspender === null);
         const statesRef = React.useRef({});
         const streamsRef = React.useRef({});
         const getState = React.useCallback((model) => {
@@ -50,18 +56,20 @@ const withCoreSuspender = (Component, Fallback = () => { }) => {
 
             return streamsRef.current[stream].read();
         }, []);
-        return (
+        React.useLayoutEffect(() => {
+            if (!render) {
+                setRender(true);
+            }
+        }, []);
+        return render ?
             <React.Suspense fallback={<Fallback {...props} />}>
                 <CoreSuspenderContext.Provider value={{ getState, decodeStream }}>
                     <Component {...props} />
                 </CoreSuspenderContext.Provider>
             </React.Suspense>
-        );
+            :
+            null;
     };
 };
 
-const useCoreSuspender = () => {
-    return React.useContext(CoreSuspenderContext);
-};
-
 module.exports = { withCoreSuspender, useCoreSuspender };