@grahlnn/comps 0.1.4 → 0.1.5

package/dist/index.js

@@ -3701,6 +3701,9 @@ function resolveActivationBootstrapText(isActivated, previousText, nextText) {
   }
   return null;
 }
+function shouldDeferTargetMeasurement(committedMeasurement, pendingBootstrapText, text) {
+  return committedMeasurement === null && pendingBootstrapText !== null && pendingBootstrapText !== text;
+}
 function getOverlayStyle(plan) {
   return {
     ...OVERLAY_STYLE,
@@ -3806,17 +3809,23 @@ function useMorphTransition(text, className, bootstrapText = null) {
   if (sessionRef.current.animating) {
     measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
   }
-  const measurementRequest = useMemo(() => createMorphMeasurementRequest({
-    text,
-    layoutContext,
-    layoutHint: measurementHint
-  }), [text, layoutContext, measurementHint]);
   let pendingBootstrapText = null;
   if (sessionRef.current.committed === null) {
     pendingBootstrapText = pendingBootstrapTextRef.current;
   }
+  const isBootstrapping = shouldDeferTargetMeasurement(sessionRef.current.committed, pendingBootstrapText, text);
+  const measurementRequest = useMemo(() => {
+    if (isBootstrapping) {
+      return null;
+    }
+    return createMorphMeasurementRequest({
+      text,
+      layoutContext,
+      layoutHint: measurementHint
+    });
+  }, [text, layoutContext, measurementHint, isBootstrapping]);
   const bootstrapMeasurementRequest = useMemo(() => {
-    if (pendingBootstrapText === null) {
+    if (!isBootstrapping || pendingBootstrapText === null) {
       return null;
     }
     return createMorphMeasurementRequest({
@@ -3824,7 +3833,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
       layoutContext,
       layoutHint: null
     });
-  }, [pendingBootstrapText, layoutContext]);
+  }, [pendingBootstrapText, layoutContext, isBootstrapping]);
   const renderText = measurementRequest?.renderText ?? text;
   const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
@@ -3852,7 +3861,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
       });
       return;
     }
-    if (pendingBootstrapText !== null && pendingBootstrapText !== text && bootstrapMeasurementRequest !== null && measurementRequest !== null) {
+    if (isBootstrapping && bootstrapMeasurementRequest !== null) {
       let bootstrapDomSnapshot = null;
       if (bootstrapMeasurementRequest.domMeasurementKey !== null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
         bootstrapDomSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey);
@@ -3968,6 +3977,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
     layoutContext,
     measurementBackend,
     measurementRequest,
+    isBootstrapping,
     pendingBootstrapText,
     bootstrapMeasurementRequest,
     domMeasurementKey,
@@ -4121,6 +4131,7 @@ function Torph({
 }
 export {
   supportsIntrinsicWidthLock,
+  shouldDeferTargetMeasurement,
   resolveVisibleFlowText,
   resolveMorphFrameBounds,
   resolveFlowText,

package/dist/torph/src/components/Torph.d.ts

@@ -97,6 +97,7 @@ export declare function getMeasurementLayerStyle(layoutContext: LayoutContext |
 export declare function resolveFlowText(committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
 export declare function resolveVisibleFlowText(pendingBootstrapText: string | null, committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
 export declare function resolveActivationBootstrapText(isActivated: boolean, previousText: string, nextText: string): string | null;
+export declare function shouldDeferTargetMeasurement(committedMeasurement: MorphMeasurement | null, pendingBootstrapText: string | null, text: string): boolean;
 export declare function Torph({ text, className, }: {
     text: string;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grahlnn/comps",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React components from grahlnn/comps.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",