Ryanstep/docs update v2

custom-implementation/src/main.tsx

@@ -1,8 +1,7 @@
 import './main.css'
 import '@devrev/marketing-shared-components/dist/cjs/index.css'
 
-import ReactDOM from 'react-dom'
-
+import ReactDOM from 'react-dom/client'
 import React from 'react'
 
 import Header from './components/header'
@@ -15,13 +14,12 @@ import { getPageData } from './modules/sanity/utils'
 
 const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper'
 const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper'
-
 const FERN_HEADER_CONTAINER_ID = 'fern-header'
 
 const render = async () => {
-  /*
-   * This is a where we try to make async data call.
-   */
+  if (typeof window === 'undefined') {
+    return
+  }
 
   const data = await getPageData()
 
@@ -30,20 +28,22 @@ const render = async () => {
 
   const theme = document.getElementsByTagName('html')[0].getAttribute('class')
 
-  if (!document.getElementById('sidenav-header-wrapper')) {
+  if (!document.getElementById('sidenav-header-wrapper') && sidenav) {
     const sidenavHeaderWrapper = document.createElement('div')
     sidenavHeaderWrapper.setAttribute('id', 'sidenav-header-wrapper')
     sidenav.appendChild(sidenavHeaderWrapper)
 
     const search = document.createElement('div')
     search.setAttribute('id', 'search-component')
     sidenavHeaderWrapper.appendChild(search)
-    ReactDOM.render(React.createElement(Search), search)
+    const searchRoot = ReactDOM.createRoot(search)
+    searchRoot.render(React.createElement(Search))
 
     const wrapper = document.createElement('div')
     wrapper.setAttribute('id', 'theme-switch')
     sidenavHeaderWrapper.appendChild(wrapper)
-    ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
+    const themeRoot = ReactDOM.createRoot(wrapper)
+    themeRoot.render(React.createElement(ThemeSwitch))
 
     sidenav.replaceWith(sidenavHeaderWrapper)
   }
@@ -83,29 +83,33 @@ const render = async () => {
       document.body.appendChild(fernHeaderContainer)
     }
 
-    ReactDOM.render(
+    // Updated to createRoot - callback handling changed
+    const headerRoot = ReactDOM.createRoot(devrevContentWrapper)
+    headerRoot.render(
       React.createElement(Header, {
         ...data.header,
         version: theme == 'dark' ? 'light' : 'dark',
-      }),
-      devrevContentWrapper,
-      () => {
-        // Once the header component is loaded, make it visible
-        const header = document.getElementById(FERN_HEADER_CONTAINER_ID)
-        if (header) header.style.display = 'block'
-      }
+      })
     )
+
+    // Make header visible immediately
+    setTimeout(() => {
+      const header = document.getElementById(FERN_HEADER_CONTAINER_ID)
+      if (header) header.style.display = 'block'
+    }, 0)
   }
 
-  ReactDOM.render(
-    React.createElement(Footer, { ...data.footer }),
-    document.getElementById('fern-footer'),
-    () => {
-      // Once the footer component is loaded, make it visible
+  const footerElement = document.getElementById('fern-footer')
+  if (footerElement) {
+    const footerRoot = ReactDOM.createRoot(footerElement)
+    footerRoot.render(React.createElement(Footer, { ...data.footer }))
+
+    // Make footer visible immediately
+    setTimeout(() => {
       const footer = document.getElementById('fern-footer')
       if (footer) footer.style.display = 'block'
-    },
-  )
+    }, 0)
+  }
 
   // Add Plug component directly to body
   if (!document.getElementById('plug-platform')) {
@@ -145,8 +149,20 @@ const render = async () => {
 }
 
 let observations = 0
-document.addEventListener('DOMContentLoaded', async () => {
-  await render()
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', async () => {
+    await render()
+    setupMutationObserver()
+  })
+} else {
+  // DOM is already ready, run immediately
+  render().then(() => {
+    setupMutationObserver()
+  })
+}
+
+function setupMutationObserver() {
   new MutationObserver(async (e, o) => {
     await render()
     for (const item of e) {
@@ -164,4 +180,4 @@ document.addEventListener('DOMContentLoaded', async () => {
       }
     }
   }).observe(document.body, { childList: true, subtree: true })
-})
+}