Fork of Chiri for Astro for my blog
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore(ui): tweak transitioninit

the3ash cf539f72 282ddd1e

+34 -9
+4
src/components/layout/TransitionWrapper.astro
··· 33 33 ::view-transition-new(page-content) { 34 34 opacity: 0; 35 35 animation: fade-in 0.4s ease 0.2s forwards; 36 + will-change: filter, opacity, transform; 36 37 } 37 38 } 38 39 } ··· 50 51 0% { 51 52 opacity: 0; 52 53 filter: blur(8px); 54 + transform: translateZ(0); 53 55 } 54 56 30% { 55 57 opacity: 0.5; 56 58 filter: blur(4px); 59 + transform: translateZ(0); 57 60 } 58 61 100% { 59 62 opacity: 1; 60 63 filter: blur(0); 64 + transform: translateZ(0); 61 65 } 62 66 } 63 67
+30 -9
src/components/ui/TransitionInit.astro
··· 108 108 initAll(document, true) 109 109 }) 110 110 111 - // Fallback: periodic check for the first few seconds 112 - let checkCount = 0 113 - const intervalCheck = setInterval(() => { 114 - if (checkCount >= 5) { 115 - clearInterval(intervalCheck) 111 + // Fallback: periodic check using requestIdleCallback with timeout-based control 112 + const startTime = Date.now() 113 + const timeoutDuration = 3000 // 3 seconds timeout 114 + let idleCallbackId = null 115 + 116 + function scheduleNextCheck() { 117 + const elapsed = Date.now() - startTime 118 + 119 + if (elapsed >= timeoutDuration) { 116 120 return 117 121 } 118 122 119 - checkCount++ 120 123 initAll(document, true) 121 - }, 500) 124 + 125 + // Schedule next check using requestIdleCallback if available, otherwise use requestAnimationFrame 126 + if ('requestIdleCallback' in window) { 127 + idleCallbackId = requestIdleCallback(scheduleNextCheck, { timeout: 1000 }) 128 + } else { 129 + idleCallbackId = requestAnimationFrame(() => { 130 + setTimeout(scheduleNextCheck, 500) 131 + }) 132 + } 133 + } 122 134 123 - // Clean up interval when page unloads 135 + // Start the fallback checks 136 + scheduleNextCheck() 137 + 138 + // Clean up when page unloads 124 139 window.addEventListener('beforeunload', () => { 125 - clearInterval(intervalCheck) 140 + if (idleCallbackId) { 141 + if ('requestIdleCallback' in window) { 142 + cancelIdleCallback(idleCallbackId) 143 + } else { 144 + cancelAnimationFrame(idleCallbackId) 145 + } 146 + } 126 147 }) 127 148 })() 128 149 </script>