Make sure DOM is ready for Portal

app/soapbox/components/ui/portal/portal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 interface IPortal {
@@ -8,9 +8,27 @@ interface IPortal {
 /**
  * Portal
  */
-const Portal: React.FC<IPortal> = ({ children }) => ReactDOM.createPortal(
-  children,
-  document.querySelector('#soapbox') as HTMLDivElement,
-);
+const Portal: React.FC<IPortal> = ({ children }) => {
+  const isRendered = useRef<boolean>(false);
+
+  useLayoutEffect(() => {
+    if (isRendered.current) {
+      return;
+    }
+
+    isRendered.current = true;
+  }, [isRendered.current]);
+
+  if (!isRendered.current) {
+    return null;
+  }
+
+  return (
+    ReactDOM.createPortal(
+      children,
+      document.getElementById('soapbox') as HTMLDivElement,
+    )
+  );
+};
 
 export default Portal;

app/soapbox/jest/test-helpers.tsx

@@ -51,21 +51,23 @@ const TestApp: FC<any> = ({ children, storeProps, routerProps = {} }) => {
   };
 
   return (
-    <Provider store={props.store}>
-      <MemoryRouter {...routerProps}>
-        <StatProvider>
-          <QueryClientProvider client={queryClient}>
-            <ChatProvider>
-              <IntlProvider locale={props.locale}>
-                {children}
-
-                <Toaster />
-              </IntlProvider>
-            </ChatProvider>
-          </QueryClientProvider>
-        </StatProvider>
-      </MemoryRouter>
-    </Provider>
+    <div id='soapbox'>
+      <Provider store={props.store}>
+        <MemoryRouter {...routerProps}>
+          <StatProvider>
+            <QueryClientProvider client={queryClient}>
+              <ChatProvider>
+                <IntlProvider locale={props.locale}>
+                  {children}
+
+                  <Toaster />
+                </IntlProvider>
+              </ChatProvider>
+            </QueryClientProvider>
+          </StatProvider>
+        </MemoryRouter>
+      </Provider>
+    </div>
   );
 };