nextjs: _app.js renders child components before wrapper components (async react context dependent on indexed db browser store)

Question

in my pages/_app.js i have this:

  if (process.browser) {
    myidb.init().then((result) => {
      console.log('setup complete! Got:', result)

      return (
        <AppLayout>
          <ItemProvider idbstore={result}>
            <Component { ...pageProps} />
          </ItemProvider>
        </AppLayout>
      )
    })
    .catch((error) => {
      console.error('could not setup browser db!', error)
      return(
        <h1>Error - we never get here tho, cos setup up always succeeds, but TOO LATE to be useful.</h1>
      )
    })
  }

The ItemProvider is just a functional HOC, essentially:

export const ItemProvider = ({children, idbstore}) => {
  // ... setup stuff
  return (<ItemContext.Provider value={...}>{children}</ItemContext.Provider>)
}

From logging, I see:

• the react context provider is called immediately, before myidb.init() has a chance to finish opening the indexeddb connection, so the context has incomplete setup, and subsequent indexeddb calls fail once the app is running.
• the <ItemProvider> is never called again by nextjs, so has no chance to recover. Only the targeted page component rebuilds.

What am I doing wrong? Why does the promise.then() not work as expected in _app.js and how can i wait for an indexed db to be setup before _app.js renders my page components?