ywana-core8 0.1.61 → 0.1.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.61",
+  "version": "0.1.62",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/site/site.js

@@ -253,13 +253,12 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
  * SitePage
  */
 const SitePage = ({ children, init }) => {
-
     const context = useContext(SiteContext)
     const { page } = context
-    
-    const [renderedPage, setRenderedPage] = useState(page)
-    const [transitionClass, setTransitionClass] = useState('')
-    
+
+    const [displayedPage, setDisplayedPage] = useState(page)
+    const [isExiting, setIsExiting] = useState(false)
+
     useEffect(() => {
         if (init) {
             context.goto(init)
@@ -269,23 +268,25 @@ const SitePage = ({ children, init }) => {
     }, [])
 
     useEffect(() => {
-        if (page !== renderedPage) {
-            setTransitionClass(`page-out`)
-            setTimeout(() => {
-                setTransitionClass(`page-in`)
-                setRenderedPage(page)
-                setTimeout(() => { 
-                    setTransitionClass('')
-                }, 300)
+        if (page !== displayedPage) {
+            setIsExiting(true)
+
+            // Esperamos a que la animación de salida termine
+            const timeout = setTimeout(() => {
+                setDisplayedPage(page)
+                setIsExiting(false)
             }, 300)
-            setRenderedPage(page)
+
+            return () => clearTimeout(timeout)
         }
     }, [page])
 
-    const currentPage = Children.toArray(children).filter(child => child.props ? child.props.id === renderedPage : false)
+    const allChildren = React.Children.toArray(children)
+    const current = allChildren.find(child => child.props?.id === displayedPage)
+
     return (
-        <main className={`site-page-container ${transitionClass}`}>
-            {currentPage}
+        <main className={`site-page-container ${isExiting ? 'page-out' : 'page-in'}`}>
+            {current}
         </main>
     )
 }