Merge pull request #2221 from AdaptiveConsulting/chore/update-modal-r…

…ender

Chore/update modal render

src/client/src/App.tsx

@@ -27,6 +27,7 @@ export async function initApp() {
 
   const container = document.getElementById("root")
   const root = createRoot(container as HTMLElement)
+
   root.render(
     <StrictMode>
       <GlobalStyle />

src/client/src/Web/cacheUpdateModal.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import styled from "styled-components"
 
 import { Modal } from "@/components/Modal"
@@ -28,7 +28,11 @@ export const showCacheUpdateModal = () => {
   const updateRoot = document.createElement("div")
   document.body.appendChild(updateRoot)
 
-  ReactDOM.render(
+  const root = createRoot(updateRoot)
+
+  console.log("Showing service worker modal")
+
+  root.render(
     <ThemeProvider>
       <Modal title="New updates are available" shouldShow>
         <p>Reload the page to see them.</p>
@@ -47,6 +51,5 @@ export const showCacheUpdateModal = () => {
         </Buttons>
       </Modal>
     </ThemeProvider>,
-    updateRoot,
   )
 }

src/client/src/main.ts

@@ -16,11 +16,15 @@ export const getMainApp: () => React.FC = () => {
         // could be a disaster
         // Wait for our async chunks to be loaded, then skip waiting phase and show
         // the user a modal informing them that there are new updates available
+
+        console.log("Service worker on update")
+
         Promise.all([
           AnalyticsCoreDeferred,
           LiveRatesCoreDeferred,
           TradesCoreDeferred,
         ]).then(() => {
+          console.log("Deferred components resolved, sending skip message")
           registration.waiting?.postMessage({ type: "SKIP_WAITING" })
           showCacheUpdateModal()
         })