@pmate/bridge 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/bridge",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "files": [
     "src",
     "global.d.ts"

package/src/PmateBridgeProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect, useMemo, useState } from "react"
+import { PropsWithChildren, ReactNode, useEffect, useMemo, useState } from "react"
 import { PmateBridgeContext } from "./context"
 import {
   getFallbackSafeInsets,
@@ -13,11 +13,13 @@ import type { DeviceInfoState, SafeInsetsState } from "./types"
 
 export type PmateBridgeProviderProps = PropsWithChildren<{
   disableSafeAreaVars?: boolean
+  loadingFallback?: ReactNode
 }>
 
 export function PmateBridgeProvider({
   children,
   disableSafeAreaVars = false,
+  loadingFallback = null,
 }: PmateBridgeProviderProps) {
   const [safeInsetsState, setSafeInsetsState] = useState<SafeInsetsState>({
     insets: getFallbackSafeInsets(),
@@ -87,7 +89,12 @@ export function PmateBridgeProvider({
     [deviceInfoState, isPmate, safeInsetsState]
   )
 
+  const runtimeReady = !isPmate || safeInsetsState.ready
   const content = disableSafeAreaVars ? children : <SafeAreaVarsProvider>{children}</SafeAreaVarsProvider>
 
-  return <PmateBridgeContext.Provider value={contextValue}>{content}</PmateBridgeContext.Provider>
+  return (
+    <PmateBridgeContext.Provider value={contextValue}>
+      {runtimeReady ? content : loadingFallback}
+    </PmateBridgeContext.Provider>
+  )
 }

package/src/SafeAreaVarsProvider.tsx

@@ -1,10 +1,10 @@
-import { PropsWithChildren, useEffect } from "react"
+import { PropsWithChildren, useLayoutEffect } from "react"
 import { useSafeInsets } from "./hooks"
 
 export function SafeAreaVarsProvider({ children }: PropsWithChildren) {
   const { insets } = useSafeInsets()
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (typeof document === "undefined") {
       return
     }