fix(activity-feed): prevent framer-motion initial-state stuck on reload
Disable initial animations for the feed's fallback UIs so a hard reload can't leave the component stuck small/transparent before any state updates. Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
@@ -1488,7 +1488,7 @@ export default function ActivityFeed() {
|
|||||||
return (
|
return (
|
||||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
|
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ scale: 0.96, opacity: 0 }}
|
initial={false}
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
|
className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
@@ -1519,7 +1519,7 @@ export default function ActivityFeed() {
|
|||||||
return (
|
return (
|
||||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
|
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ scale: 0.96, opacity: 0 }}
|
initial={false}
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
|
className="pointer-events-auto bg-white/90 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
@@ -1551,7 +1551,7 @@ export default function ActivityFeed() {
|
|||||||
return (
|
return (
|
||||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 flex flex-col items-end gap-3 z-40 font-sans pointer-events-none w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)]">
|
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 flex flex-col items-end gap-3 z-40 font-sans pointer-events-none w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)]">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ scale: 0, opacity: 0 }}
|
initial={false}
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
className="pointer-events-auto bg-white/80 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
|
className="pointer-events-auto bg-white/80 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-xl overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
@@ -1584,7 +1584,7 @@ export default function ActivityFeed() {
|
|||||||
if (isMinimized) {
|
if (isMinimized) {
|
||||||
return (
|
return (
|
||||||
<motion.button
|
<motion.button
|
||||||
initial={{ scale: 0 }}
|
initial={false}
|
||||||
animate={{ scale: 1 }}
|
animate={{ scale: 1 }}
|
||||||
onClick={() => setIsMinimized(false)}
|
onClick={() => setIsMinimized(false)}
|
||||||
className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto bg-white/80 backdrop-blur-xl border border-white/60 p-3 rounded-full shadow-xl hover:scale-110 transition-transform"
|
className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto bg-white/80 backdrop-blur-xl border border-white/60 p-3 rounded-full shadow-xl hover:scale-110 transition-transform"
|
||||||
|
|||||||
Reference in New Issue
Block a user