@tamagui/animate 1.128.1 → 1.129.0

package/dist/cjs/Animate.cjs

@@ -24,12 +24,22 @@ __export(Animate_exports, {
 });
 module.exports = __toCommonJS(Animate_exports);
 var import_animate_presence = require("@tamagui/animate-presence"),
+  import_react = require("react"),
   import_jsx_runtime = require("react/jsx-runtime");
 function Animate({
   children,
+  lazyMount,
   type,
+  present,
   ...props
 }) {
+  const [lazyMounted, setLazyMounted] = (0, import_react.useState)(lazyMount ? !1 : present);
+  (0, import_react.useEffect)(() => {
+    lazyMount && present && (0, import_react.startTransition)(() => {
+      setLazyMounted(present);
+    });
+  }, [lazyMount, present]);
+  const mounted = present ? lazyMount ? lazyMounted : present : !1;
   return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.PresenceChild, {
     initial: props.initial ? void 0 : !1,
     onExitComplete: props.onExitComplete,
@@ -37,12 +47,12 @@ function Animate({
     exitVariant: props.exitVariant,
     enterExitVariant: props.enterExitVariant,
     presenceAffectsLayout: !1,
-    isPresent: props.present,
+    isPresent: present,
     custom: props.custom,
     children
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
     ...props,
-    children: props.present ? children : null
+    children: mounted ? children : null
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children
   });

package/dist/cjs/Animate.js

@@ -17,8 +17,21 @@ __export(Animate_exports, {
   Animate: () => Animate
 });
 module.exports = __toCommonJS(Animate_exports);
-var import_animate_presence = require("@tamagui/animate-presence"), import_jsx_runtime = require("react/jsx-runtime");
-function Animate({ children, type, ...props }) {
+var import_animate_presence = require("@tamagui/animate-presence"), import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime");
+function Animate({
+  children,
+  lazyMount,
+  type,
+  present,
+  ...props
+}) {
+  const [lazyMounted, setLazyMounted] = (0, import_react.useState)(lazyMount ? !1 : present);
+  (0, import_react.useEffect)(() => {
+    lazyMount && present && (0, import_react.startTransition)(() => {
+      setLazyMounted(present);
+    });
+  }, [lazyMount, present]);
+  const mounted = present ? lazyMount ? lazyMounted : present : !1;
   return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_animate_presence.PresenceChild,
     {
@@ -28,10 +41,10 @@ function Animate({ children, type, ...props }) {
       exitVariant: props.exitVariant,
       enterExitVariant: props.enterExitVariant,
       presenceAffectsLayout: !1,
-      isPresent: props.present,
+      isPresent: present,
       custom: props.custom,
       children
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { ...props, children: props.present ? children : null }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { ...props, children: mounted ? children : null }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 }
 //# sourceMappingURL=Animate.js.map

package/dist/cjs/Animate.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Animate.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,8BAA+C,sCAsCvC;AAJD,SAAS,QAAQ,EAAE,UAAU,MAAM,GAAG,MAAM,GAA8B;AAC/E,SAAI,SAAS,aACP,MAAM,sBAEN;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,UAAU,SAAY;AAAA,MACrC,gBAAgB,MAAM;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,aAAa,MAAM;AAAA,MACnB,kBAAkB,MAAM;AAAA,MAGxB,uBAAuB;AAAA,MACvB,WAAW,MAAM;AAAA,MACjB,QAAQ,MAAM;AAAA,MAEb;AAAA;AAAA,EACH,IAIG,4CAAC,2CAAiB,GAAG,OAAQ,gBAAM,UAAU,WAAW,MAAK,IAG/D,2EAAG,UAAS;AACrB;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,8BAA+C,sCAC/C,eAAqD,kBA0D7C;AAvBD,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,YAAY,KAAQ,OAAO;AAE1E,8BAAU,MAAM;AACd,IAAK,aACA,eACL,8BAAgB,MAAM;AACpB,qBAAe,OAAO;AAAA,IACxB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,OAAO,CAAC;AAGvB,QAAM,UAAW,UAAkB,YAAY,cAAc,UAAlC;AAE3B,SAAI,SAAS,aACP,MAAM,sBAEN;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,UAAU,SAAY;AAAA,MACrC,gBAAgB,MAAM;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,aAAa,MAAM;AAAA,MACnB,kBAAkB,MAAM;AAAA,MAGxB,uBAAuB;AAAA,MACvB,WAAW;AAAA,MACX,QAAQ,MAAM;AAAA,MAEb;AAAA;AAAA,EACH,IAIG,4CAAC,2CAAiB,GAAG,OAAQ,oBAAU,WAAW,MAAK,IAGzD,2EAAG,UAAS;AACrB;",
   "names": []
 }

package/dist/cjs/Animate.native.js

@@ -18,9 +18,18 @@ __export(Animate_exports, {
   Animate: () => Animate
 });
 module.exports = __toCommonJS(Animate_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), import_animate_presence = require("@tamagui/animate-presence");
+var import_jsx_runtime = require("react/jsx-runtime"), import_animate_presence = require("@tamagui/animate-presence"), import_react = require("react");
 function Animate(param) {
-  var { children, type, ...props } = param;
+  var { children, lazyMount, type, present, ...props } = param, [lazyMounted, setLazyMounted] = (0, import_react.useState)(lazyMount ? !1 : present);
+  (0, import_react.useEffect)(function() {
+    lazyMount && present && (0, import_react.startTransition)(function() {
+      setLazyMounted(present);
+    });
+  }, [
+    lazyMount,
+    present
+  ]);
+  var mounted = present ? lazyMount ? lazyMounted : present : !1;
   return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.PresenceChild, {
     initial: props.initial ? void 0 : !1,
     onExitComplete: props.onExitComplete,
@@ -30,12 +39,12 @@ function Animate(param) {
     // BUGFIX: this causes continous re-renders if keepChildrenMounted is true, see HeaderMenu
     // but since we always re-render this component on open changes this should be fine to leave off?
     presenceAffectsLayout: !1,
-    isPresent: props.present,
+    isPresent: present,
     custom: props.custom,
     children
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
     ...props,
-    children: props.present ? children : null
+    children: mounted ? children : null
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children
   });

package/dist/cjs/Animate.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Animate.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;uDACA,0BAA+C;AAkCxC,SAASA,QAAQ,OAA0C;MAA1C,EAAEC,UAAUC,MAAM,GAAGC,MAAAA,IAArB;AACtB,SAAID,SAAS,aACPC,MAAMC,sBAEN,uCAAAC,KAACC,uCAAAA;IACCC,SAASJ,MAAMI,UAAUC,SAAY;IACrCC,gBAAgBN,MAAMM;IACtBC,cAAcP,MAAMO;IACpBC,aAAaR,MAAMQ;IACnBC,kBAAkBT,MAAMS;;;IAGxBC,uBAAuB;IACvBC,WAAWX,MAAMY;IACjBC,QAAQb,MAAMa;;OAOb,uCAAAX,KAACY,yCAAAA;IAAiB,GAAGd;cAAQA,MAAMY,UAAUd,WAAW;OAG1D,uCAAAI,KAAA,mBAAAa,UAAA;;;AACT;",
-  "names": ["Animate", "children", "type", "props", "keepChildrenMounted", "_jsx", "PresenceChild", "initial", "undefined", "onExitComplete", "enterVariant", "exitVariant", "enterExitVariant", "presenceAffectsLayout", "isPresent", "present", "custom", "AnimatePresence", "_Fragment"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;uDACA,0BAA+C,sCAC/C,eAAqD;AAmC9C,SAASA,QAAQ,OAMT;MANS,EACtBC,UACAC,WACAC,MACAC,SACA,GAAGC,MAAAA,IALmB,OAOhB,CAACC,aAAaC,cAAAA,QAAkBC,uBAASN,YAAY,KAAQE,OAAAA;AAEnEK,8BAAU,WAAA;AACR,IAAKP,aACAE,eACLM,8BAAgB,WAAA;AACdH,qBAAeH,OAAAA;IACjB,CAAA;EACF,GAAG;IAACF;IAAWE;GAAQ;AAGvB,MAAMO,UAAWP,UAAkBF,YAAYI,cAAcF,UAAlC;AAE3B,SAAID,SAAS,aACPE,MAAMO,sBAEN,uCAAAC,KAACC,uCAAAA;IACCC,SAASV,MAAMU,UAAUC,SAAY;IACrCC,gBAAgBZ,MAAMY;IACtBC,cAAcb,MAAMa;IACpBC,aAAad,MAAMc;IACnBC,kBAAkBf,MAAMe;;;IAGxBC,uBAAuB;IACvBC,WAAWlB;IACXmB,QAAQlB,MAAMkB;;OAOb,uCAAAV,KAACW,yCAAAA;IAAiB,GAAGnB;cAAQM,UAAUV,WAAW;OAGpD,uCAAAY,KAAA,mBAAAY,UAAA;;;AACT;",
+  "names": ["Animate", "children", "lazyMount", "type", "present", "props", "lazyMounted", "setLazyMounted", "useState", "useEffect", "startTransition", "mounted", "keepChildrenMounted", "_jsx", "PresenceChild", "initial", "undefined", "onExitComplete", "enterVariant", "exitVariant", "enterExitVariant", "presenceAffectsLayout", "isPresent", "custom", "AnimatePresence", "_Fragment"]
 }

package/dist/esm/Animate.js

@@ -1,6 +1,20 @@
 import { AnimatePresence, PresenceChild } from "@tamagui/animate-presence";
+import { startTransition, useEffect, useState } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
-function Animate({ children, type, ...props }) {
+function Animate({
+  children,
+  lazyMount,
+  type,
+  present,
+  ...props
+}) {
+  const [lazyMounted, setLazyMounted] = useState(lazyMount ? !1 : present);
+  useEffect(() => {
+    lazyMount && present && startTransition(() => {
+      setLazyMounted(present);
+    });
+  }, [lazyMount, present]);
+  const mounted = present ? lazyMount ? lazyMounted : present : !1;
   return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */ jsx(
     PresenceChild,
     {
@@ -10,11 +24,11 @@ function Animate({ children, type, ...props }) {
       exitVariant: props.exitVariant,
       enterExitVariant: props.enterExitVariant,
       presenceAffectsLayout: !1,
-      isPresent: props.present,
+      isPresent: present,
       custom: props.custom,
       children
     }
-  ) : /* @__PURE__ */ jsx(AnimatePresence, { ...props, children: props.present ? children : null }) : /* @__PURE__ */ jsx(Fragment, { children });
+  ) : /* @__PURE__ */ jsx(AnimatePresence, { ...props, children: mounted ? children : null }) : /* @__PURE__ */ jsx(Fragment, { children });
 }
 export {
   Animate

package/dist/esm/Animate.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Animate.tsx"],
-  "mappings": "AACA,SAAS,iBAAiB,qBAAqB;AAsCvC,SAoBC,UApBD;AAJD,SAAS,QAAQ,EAAE,UAAU,MAAM,GAAG,MAAM,GAA8B;AAC/E,SAAI,SAAS,aACP,MAAM,sBAEN;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,UAAU,SAAY;AAAA,MACrC,gBAAgB,MAAM;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,aAAa,MAAM;AAAA,MACnB,kBAAkB,MAAM;AAAA,MAGxB,uBAAuB;AAAA,MACvB,WAAW,MAAM;AAAA,MACjB,QAAQ,MAAM;AAAA,MAEb;AAAA;AAAA,EACH,IAIG,oBAAC,mBAAiB,GAAG,OAAQ,gBAAM,UAAU,WAAW,MAAK,IAG/D,gCAAG,UAAS;AACrB;",
+  "mappings": "AACA,SAAS,iBAAiB,qBAAqB;AAC/C,SAAS,iBAAiB,WAAW,gBAAgB;AA0D7C,SAoBC,UApBD;AAvBD,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,YAAY,KAAQ,OAAO;AAE1E,YAAU,MAAM;AACd,IAAK,aACA,WACL,gBAAgB,MAAM;AACpB,qBAAe,OAAO;AAAA,IACxB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,OAAO,CAAC;AAGvB,QAAM,UAAW,UAAkB,YAAY,cAAc,UAAlC;AAE3B,SAAI,SAAS,aACP,MAAM,sBAEN;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,UAAU,SAAY;AAAA,MACrC,gBAAgB,MAAM;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,aAAa,MAAM;AAAA,MACnB,kBAAkB,MAAM;AAAA,MAGxB,uBAAuB;AAAA,MACvB,WAAW;AAAA,MACX,QAAQ,MAAM;AAAA,MAEb;AAAA;AAAA,EACH,IAIG,oBAAC,mBAAiB,GAAG,OAAQ,oBAAU,WAAW,MAAK,IAGzD,gCAAG,UAAS;AACrB;",
   "names": []
 }

package/dist/esm/Animate.mjs

@@ -1,10 +1,20 @@
 import { AnimatePresence, PresenceChild } from "@tamagui/animate-presence";
+import { startTransition, useEffect, useState } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 function Animate({
   children,
+  lazyMount,
   type,
+  present,
   ...props
 }) {
+  const [lazyMounted, setLazyMounted] = useState(lazyMount ? !1 : present);
+  useEffect(() => {
+    lazyMount && present && startTransition(() => {
+      setLazyMounted(present);
+    });
+  }, [lazyMount, present]);
+  const mounted = present ? lazyMount ? lazyMounted : present : !1;
   return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */jsx(PresenceChild, {
     initial: props.initial ? void 0 : !1,
     onExitComplete: props.onExitComplete,
@@ -12,12 +22,12 @@ function Animate({
     exitVariant: props.exitVariant,
     enterExitVariant: props.enterExitVariant,
     presenceAffectsLayout: !1,
-    isPresent: props.present,
+    isPresent: present,
     custom: props.custom,
     children
   }) : /* @__PURE__ */jsx(AnimatePresence, {
     ...props,
-    children: props.present ? children : null
+    children: mounted ? children : null
   }) : /* @__PURE__ */jsx(Fragment, {
     children
   });

package/dist/esm/Animate.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["AnimatePresence","PresenceChild","Fragment","jsx","Animate","children","type","props","keepChildrenMounted","initial","onExitComplete","enterVariant","exitVariant","enterExitVariant","presenceAffectsLayout","isPresent","present","custom"],"sources":["../../src/Animate.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,eAAA,EAAiBC,aAAA,QAAqB;AAsCvC,SAoBCC,QAAA,EApBDC,GAAA;AAJD,SAASC,QAAQ;EAAEC,QAAA;EAAUC,IAAA;EAAM,GAAGC;AAAM,GAA8B;EAC/E,OAAID,IAAA,KAAS,aACPC,KAAA,CAAMC,mBAAA,GAEN,eAAAL,GAAA,CAACF,aAAA;IACCQ,OAAA,EAASF,KAAA,CAAME,OAAA,GAAU,SAAY;IACrCC,cAAA,EAAgBH,KAAA,CAAMG,cAAA;IACtBC,YAAA,EAAcJ,KAAA,CAAMI,YAAA;IACpBC,WAAA,EAAaL,KAAA,CAAMK,WAAA;IACnBC,gBAAA,EAAkBN,KAAA,CAAMM,gBAAA;IAGxBC,qBAAA,EAAuB;IACvBC,SAAA,EAAWR,KAAA,CAAMS,OAAA;IACjBC,MAAA,EAAQV,KAAA,CAAMU,MAAA;IAEbZ;EAAA,CACH,IAIG,eAAAF,GAAA,CAACH,eAAA;IAAiB,GAAGO,KAAA;IAAQF,QAAA,EAAAE,KAAA,CAAMS,OAAA,GAAUX,QAAA,GAAW;EAAA,CAAK,IAG/D,eAAAF,GAAA,CAAAD,QAAA;IAAGG;EAAA,CAAS;AACrB","ignoreList":[]}
+{"version":3,"names":["AnimatePresence","PresenceChild","startTransition","useEffect","useState","Fragment","jsx","Animate","children","lazyMount","type","present","props","lazyMounted","setLazyMounted","mounted","keepChildrenMounted","initial","onExitComplete","enterVariant","exitVariant","enterExitVariant","presenceAffectsLayout","isPresent","custom"],"sources":["../../src/Animate.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,eAAA,EAAiBC,aAAA,QAAqB;AAC/C,SAASC,eAAA,EAAiBC,SAAA,EAAWC,QAAA,QAAgB;AA0D7C,SAoBCC,QAAA,EApBDC,GAAA;AAvBD,SAASC,QAAQ;EACtBC,QAAA;EACAC,SAAA;EACAC,IAAA;EACAC,OAAA;EACA,GAAGC;AACL,GAAkC;EAChC,MAAM,CAACC,WAAA,EAAaC,cAAc,IAAIV,QAAA,CAASK,SAAA,GAAY,KAAQE,OAAO;EAE1ER,SAAA,CAAU,MAAM;IACTM,SAAA,IACAE,OAAA,IACLT,eAAA,CAAgB,MAAM;MACpBY,cAAA,CAAeH,OAAO;IACxB,CAAC;EACH,GAAG,CAACF,SAAA,EAAWE,OAAO,CAAC;EAGvB,MAAMI,OAAA,GAAWJ,OAAA,GAAkBF,SAAA,GAAYI,WAAA,GAAcF,OAAA,GAAlC;EAE3B,OAAID,IAAA,KAAS,aACPE,KAAA,CAAMI,mBAAA,GAEN,eAAAV,GAAA,CAACL,aAAA;IACCgB,OAAA,EAASL,KAAA,CAAMK,OAAA,GAAU,SAAY;IACrCC,cAAA,EAAgBN,KAAA,CAAMM,cAAA;IACtBC,YAAA,EAAcP,KAAA,CAAMO,YAAA;IACpBC,WAAA,EAAaR,KAAA,CAAMQ,WAAA;IACnBC,gBAAA,EAAkBT,KAAA,CAAMS,gBAAA;IAGxBC,qBAAA,EAAuB;IACvBC,SAAA,EAAWZ,OAAA;IACXa,MAAA,EAAQZ,KAAA,CAAMY,MAAA;IAEbhB;EAAA,CACH,IAIG,eAAAF,GAAA,CAACN,eAAA;IAAiB,GAAGY,KAAA;IAAQJ,QAAA,EAAAO,OAAA,GAAUP,QAAA,GAAW;EAAA,CAAK,IAGzD,eAAAF,GAAA,CAAAD,QAAA;IAAGG;EAAA,CAAS;AACrB","ignoreList":[]}

package/dist/esm/Animate.native.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { AnimatePresence, PresenceChild } from "@tamagui/animate-presence";
+import { startTransition, useEffect, useState } from "react";
 function Animate(param) {
   var {
-    children,
-    type,
-    ...props
-  } = param;
+      children,
+      lazyMount,
+      type,
+      present,
+      ...props
+    } = param,
+    [lazyMounted, setLazyMounted] = useState(lazyMount ? !1 : present);
+  useEffect(function () {
+    lazyMount && present && startTransition(function () {
+      setLazyMounted(present);
+    });
+  }, [lazyMount, present]);
+  var mounted = present ? lazyMount ? lazyMounted : present : !1;
   return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */_jsx(PresenceChild, {
     initial: props.initial ? void 0 : !1,
     onExitComplete: props.onExitComplete,
@@ -15,12 +25,12 @@ function Animate(param) {
     // BUGFIX: this causes continous re-renders if keepChildrenMounted is true, see HeaderMenu
     // but since we always re-render this component on open changes this should be fine to leave off?
     presenceAffectsLayout: !1,
-    isPresent: props.present,
+    isPresent: present,
     custom: props.custom,
     children
   }) : /* @__PURE__ */_jsx(AnimatePresence, {
     ...props,
-    children: props.present ? children : null
+    children: mounted ? children : null
   }) : /* @__PURE__ */_jsx(_Fragment, {
     children
   });

package/dist/esm/Animate.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","Fragment","_Fragment","AnimatePresence","PresenceChild","Animate","param","children","type","props","keepChildrenMounted","initial","onExitComplete","enterVariant","exitVariant","enterExitVariant","presenceAffectsLayout","isPresent","present","custom"],"sources":["../../src/Animate.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,EAAAC,QAAiB,IAAAC,SAAA,QAAqB;AAsCvC,SAoBCC,eApBD,EAAAC,aAAA;AAJD,SAASC,QAAQC,KAAE;EACxB;IAAAC,QAAI;IAASC,IAAA;IAAA,GAAAC;EACP,IAAMH,KAAA;EAEN,OAACE,IAAA,kBAAAC,KAAA,CAAAC,mBAAA,kBAAAV,IAAA,CAAAI,aAAA;IAAAO,OAAA,EAAAF,KAAA,CAAAE,OAAA;IAAAC,cACU,EAAAH,KAAM,CAAAG,cAAsB;IAAAC,YACrC,EAAAJ,KAAgB,CAAAI,YAAM;IAAAC,WACtB,EAAAL,KAAc,CAAAK,WAAM;IAAAC,gBACP,EAAAN,KAAM,CAAAM,gBAAA;IAAA;IACK;IAGDC,qBACN;IAAAC,SACjB,EAAQR,KAAM,CAAAS,OAAA;IAAAC,MAEb,EAAAV,KAAA,CAAAU,MAAA;IAAAZ;EACH,KAIG,eAAAP,IAAC,CAAAG,eAAA,EAAiB;IAI7B,GAAAM,KAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","Fragment","_Fragment","AnimatePresence","PresenceChild","startTransition","useEffect","useState","Animate","param","children","lazyMount","type","present","props","lazyMounted","setLazyMounted","mounted","keepChildrenMounted","initial","onExitComplete","enterVariant","exitVariant","enterExitVariant","presenceAffectsLayout","isPresent","custom"],"sources":["../../src/Animate.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,EAAAC,QAAiB,IAAAC,SAAA,QAAqB;AAC/C,SAASC,eAAA,EAAiBC,aAAW,mCAAgB;AA0D7C,SAoBCC,eApBD,EAAAC,SAAA,EAAAC,QAAA;AAvBD,SAASC,QAAQC,KAAA;EACtB;MAAAC,QAAA;MAAAC,SAAA;MAAAC,IAAA;MAAAC,OAAA;MAAA,GAAAC;IAAA,IAAAL,KAAA;IAAA,CAAAM,WAAA,EAAAC,cAAA,IAAAT,QAAA,CAAAI,SAAA,QAAAE,OAAA;EACAP,SAAA;IACAK,SAAA,IAAAE,OAAA,IAAAR,eAAA;MACAW,cAAA,CAAAH,OAAA;IACA,CAAG;EACL,CAAkC,GAChCF,SAAO,EAEPE,OAAA,CACE,CAAK;EAGH,IAAAI,OAAA,GAAAJ,OAAe,GAAAF,SAAO,GAAAI,WAAA,GAAAF,OAAA;EAAA,OACvBD,IAAA,kBAAAE,KAAA,CAAAI,mBAAA,kBAAAlB,IAAA,CAAAI,aAAA;IACHe,OAAI,EAAAL,KAAW,CAAAK,OAAQ;IAGvBC,cAAiB,EAAAN,KAAA,CAAAM,cAA8B;IAE/CC,YAAI,EAASP,KAAA,CAAAO,YACP;IAECC,WAAA,EAAAR,KAAA,CAAAQ,WAAA;IAAAC,gBAAA,EAAAT,KAAA,CAAAS,gBAAA;IAAA;IACsC;IACfC,qBACR,EAAM;IAAAC,SACpB,EAAAZ,OAAa;IAAMa,MACnB,EAAAZ,KAAA,CAAAY,MAAkB;IAAMhB;EAGD,KACvB,eAAWV,IAAA,CAAAG,eAAA;IAAA,GACXW,KAAA;IAAcJ,QAEb,EAAAO,OAAA,GAAAP,QAAA;EAAA,oBAAAV,IAAA,CAAAE,SAAA;IACHQ;EAQR","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animate",
-  "version": "1.128.1",
+  "version": "1.129.0",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -13,10 +13,10 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/animate-presence": "1.128.1"
+    "@tamagui/animate-presence": "1.129.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.128.1"
+    "@tamagui/build": "1.129.0"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/Animate.tsx

@@ -1,5 +1,6 @@
 import type { AnimatePresenceProps } from '@tamagui/animate-presence'
 import { AnimatePresence, PresenceChild } from '@tamagui/animate-presence'
+import { startTransition, useEffect, useState } from 'react'
 import type { JSX } from 'react/jsx-runtime'
 
 type BaseProps = {
@@ -10,6 +11,7 @@ type PresenceProps = AnimatePresenceProps & {
   type: 'presence'
   present: boolean
   keepChildrenMounted?: boolean
+  lazyMount?: boolean
 }
 
 export type AnimateProps = BaseProps & PresenceProps
@@ -33,7 +35,26 @@ export type AnimateProps = BaseProps & PresenceProps
  *
  */
 
-export function Animate({ children, type, ...props }: AnimateProps): JSX.Element {
+export function Animate({
+  children,
+  lazyMount,
+  type,
+  present,
+  ...props
+}: AnimateProps): React.ReactNode {
+  const [lazyMounted, setLazyMounted] = useState(lazyMount ? false : present)
+
+  useEffect(() => {
+    if (!lazyMount) return
+    if (!present) return
+    startTransition(() => {
+      setLazyMounted(present)
+    })
+  }, [lazyMount, present])
+
+  // always immediately unmount
+  const mounted = !present ? false : lazyMount ? lazyMounted : present
+
   if (type === 'presence') {
     if (props.keepChildrenMounted) {
       return (
@@ -46,7 +67,7 @@ export function Animate({ children, type, ...props }: AnimateProps): JSX.Element
           // BUGFIX: this causes continous re-renders if keepChildrenMounted is true, see HeaderMenu
           // but since we always re-render this component on open changes this should be fine to leave off?
           presenceAffectsLayout={false}
-          isPresent={props.present}
+          isPresent={present}
           custom={props.custom}
         >
           {children as any}
@@ -54,7 +75,7 @@ export function Animate({ children, type, ...props }: AnimateProps): JSX.Element
       )
     }
 
-    return <AnimatePresence {...props}>{props.present ? children : null}</AnimatePresence>
+    return <AnimatePresence {...props}>{mounted ? children : null}</AnimatePresence>
   }
 
   return <>{children}</>

package/types/Animate.d.ts

@@ -1,10 +1,12 @@
 import type { AnimatePresenceProps } from "@tamagui/animate-presence";
-import type { JSX } from "react/jsx-runtime";
-type BaseProps = { children: React.ReactNode };
+type BaseProps = {
+	children: React.ReactNode;
+};
 type PresenceProps = AnimatePresenceProps & {
 	type: "presence";
 	present: boolean;
 	keepChildrenMounted?: boolean;
+	lazyMount?: boolean;
 };
 export type AnimateProps = BaseProps & PresenceProps;
 /**
@@ -25,7 +27,7 @@ export type AnimateProps = BaseProps & PresenceProps;
 *
 *
 */
-export declare function Animate({ children, type,...props }: AnimateProps): JSX.Element;
+export declare function Animate({ children, lazyMount, type, present,...props }: AnimateProps): React.ReactNode;
 export {};
 
 //# sourceMappingURL=Animate.d.ts.map

package/types/Animate.d.ts.map

@@ -1,11 +1,11 @@
 {
-  "mappings": "AAAA,cAAc,4BAA4B,2BAA2B;AAErE,cAAc,WAAW,mBAAmB;KAEvC,YAAY,EACf,UAAU,MAAM,UACjB;KAEI,gBAAgB,uBAAuB;CAC1C,MAAM;CACN;CACA;AACD;AAED,YAAY,eAAe,YAAY;;;;;;;;;;;;;;;;;;;AAqBvC,OAAO,iBAAS,QAAQ,EAAE,UAAU,KAAM,GAAG,OAAqB,EAAZ,eAAe,IAAI",
+  "mappings": "AAAA,cAAc,4BAA4B,2BAA2B;KAKhE,YAAY;CACf,UAAU,MAAM;AACjB;KAEI,gBAAgB,uBAAuB;CAC1C,MAAM;CACN;CACA;CACA;AACD;AAED,YAAY,eAAe,YAAY;;;;;;;;;;;;;;;;;;;AAqBvC,OAAO,iBAAS,QAAQ,EACtB,UACA,WACA,MACA,QACA,GAAG,OACU,EAAZ,eAAe,MAAM",
   "names": [],
   "sources": [
     "src/Animate.tsx"
   ],
   "sourcesContent": [
-    "import type { AnimatePresenceProps } from '@tamagui/animate-presence'\nimport { AnimatePresence, PresenceChild } from '@tamagui/animate-presence'\nimport type { JSX } from 'react/jsx-runtime'\n\ntype BaseProps = {\n  children: React.ReactNode\n}\n\ntype PresenceProps = AnimatePresenceProps & {\n  type: 'presence'\n  present: boolean\n  keepChildrenMounted?: boolean\n}\n\nexport type AnimateProps = BaseProps & PresenceProps\n\n/**\n * Because mounting and unmounting children can be expensive, this gives us the\n * option to avoid that.\n *\n * type: 'presence' will act just like AnimatePresence, except you use `present`\n * instead of conditional children.\n * Note that this does avoid reconciling the children even when present={false}\n * so no extra cost to perf over AnimatePresence.\n *\n * type: 'presence' with keepChildrenMounted true *always* render the children so you pay\n * the cost up-front to mount them, but then you avoid the mount cost at the start\n * of the animation.\n *\n * There's no \"right way\" it just depends on the use case, this component just makes\n * it easier to choose the strategy yourself.\n *\n *\n */\n\nexport function Animate({ children, type, ...props }: AnimateProps): JSX.Element {\n  if (type === 'presence') {\n    if (props.keepChildrenMounted) {\n      return (\n        <PresenceChild\n          initial={props.initial ? undefined : false}\n          onExitComplete={props.onExitComplete}\n          enterVariant={props.enterVariant}\n          exitVariant={props.exitVariant}\n          enterExitVariant={props.enterExitVariant}\n          // BUGFIX: this causes continous re-renders if keepChildrenMounted is true, see HeaderMenu\n          // but since we always re-render this component on open changes this should be fine to leave off?\n          presenceAffectsLayout={false}\n          isPresent={props.present}\n          custom={props.custom}\n        >\n          {children as any}\n        </PresenceChild>\n      )\n    }\n\n    return <AnimatePresence {...props}>{props.present ? children : null}</AnimatePresence>\n  }\n\n  return <>{children}</>\n}\n"
+    "import type { AnimatePresenceProps } from '@tamagui/animate-presence'\nimport { AnimatePresence, PresenceChild } from '@tamagui/animate-presence'\nimport { startTransition, useEffect, useState } from 'react'\nimport type { JSX } from 'react/jsx-runtime'\n\ntype BaseProps = {\n  children: React.ReactNode\n}\n\ntype PresenceProps = AnimatePresenceProps & {\n  type: 'presence'\n  present: boolean\n  keepChildrenMounted?: boolean\n  lazyMount?: boolean\n}\n\nexport type AnimateProps = BaseProps & PresenceProps\n\n/**\n * Because mounting and unmounting children can be expensive, this gives us the\n * option to avoid that.\n *\n * type: 'presence' will act just like AnimatePresence, except you use `present`\n * instead of conditional children.\n * Note that this does avoid reconciling the children even when present={false}\n * so no extra cost to perf over AnimatePresence.\n *\n * type: 'presence' with keepChildrenMounted true *always* render the children so you pay\n * the cost up-front to mount them, but then you avoid the mount cost at the start\n * of the animation.\n *\n * There's no \"right way\" it just depends on the use case, this component just makes\n * it easier to choose the strategy yourself.\n *\n *\n */\n\nexport function Animate({\n  children,\n  lazyMount,\n  type,\n  present,\n  ...props\n}: AnimateProps): React.ReactNode {\n  const [lazyMounted, setLazyMounted] = useState(lazyMount ? false : present)\n\n  useEffect(() => {\n    if (!lazyMount) return\n    if (!present) return\n    startTransition(() => {\n      setLazyMounted(present)\n    })\n  }, [lazyMount, present])\n\n  // always immediately unmount\n  const mounted = !present ? false : lazyMount ? lazyMounted : present\n\n  if (type === 'presence') {\n    if (props.keepChildrenMounted) {\n      return (\n        <PresenceChild\n          initial={props.initial ? undefined : false}\n          onExitComplete={props.onExitComplete}\n          enterVariant={props.enterVariant}\n          exitVariant={props.exitVariant}\n          enterExitVariant={props.enterExitVariant}\n          // BUGFIX: this causes continous re-renders if keepChildrenMounted is true, see HeaderMenu\n          // but since we always re-render this component on open changes this should be fine to leave off?\n          presenceAffectsLayout={false}\n          isPresent={present}\n          custom={props.custom}\n        >\n          {children as any}\n        </PresenceChild>\n      )\n    }\n\n    return <AnimatePresence {...props}>{mounted ? children : null}</AnimatePresence>\n  }\n\n  return <>{children}</>\n}\n"
   ],
   "version": 3
 }