fix: prevent pulse animation on initial load and hide N/A messages in chat/overlay

This commit is contained in:
Yusuf İpek
2025-10-11 19:37:05 +03:00
parent 0da4f54612
commit d661e969d9
3 changed files with 27 additions and 11 deletions
+20 -6
View File
@@ -49,6 +49,7 @@ export default function DashboardPage() {
const [memberPulse, setMemberPulse] = useState(false); const [memberPulse, setMemberPulse] = useState(false);
const prevSuperChatCountRef = useRef(0); const prevSuperChatCountRef = useRef(0);
const prevMemberCountRef = useRef(0); const prevMemberCountRef = useRef(0);
const hasInitializedRef = useRef(false);
const handleSelect = useCallback( const handleSelect = useCallback(
async (message: ChatMessage) => { async (message: ChatMessage) => {
@@ -113,13 +114,24 @@ export default function DashboardPage() {
const newMembers = useMemo(() => messages.filter(m => m.membershipGift || m.membershipGiftPurchase), [messages]); const newMembers = useMemo(() => messages.filter(m => m.membershipGift || m.membershipGiftPurchase), [messages]);
const regularMessages = useMemo(() => messages.filter(m => !m.superChat && !m.membershipGift && !m.membershipGiftPurchase), [messages]); const regularMessages = useMemo(() => messages.filter(m => !m.superChat && !m.membershipGift && !m.membershipGiftPurchase), [messages]);
// Initialize counts on first load without triggering pulse
useEffect(() => {
if (!hasInitializedRef.current && messages.length > 0) {
prevSuperChatCountRef.current = superChats.length;
prevMemberCountRef.current = newMembers.length;
hasInitializedRef.current = true;
}
}, [messages.length, superChats.length, newMembers.length]);
// Detect new superchats and trigger pulse // Detect new superchats and trigger pulse
useEffect(() => { useEffect(() => {
if (!hasInitializedRef.current) return;
const prevCount = prevSuperChatCountRef.current; const prevCount = prevSuperChatCountRef.current;
const currentCount = superChats.length; const currentCount = superChats.length;
// Trigger pulse if count increased (but not on initial mount when both are 0) // Trigger pulse if count increased
if (currentCount > prevCount && !(prevCount === 0 && currentCount === 0)) { if (currentCount > prevCount) {
setSuperChatPulse(true); setSuperChatPulse(true);
const timer = setTimeout(() => setSuperChatPulse(false), 10000); const timer = setTimeout(() => setSuperChatPulse(false), 10000);
prevSuperChatCountRef.current = currentCount; prevSuperChatCountRef.current = currentCount;
@@ -131,11 +143,13 @@ export default function DashboardPage() {
// Detect new members and trigger pulse // Detect new members and trigger pulse
useEffect(() => { useEffect(() => {
if (!hasInitializedRef.current) return;
const prevCount = prevMemberCountRef.current; const prevCount = prevMemberCountRef.current;
const currentCount = newMembers.length; const currentCount = newMembers.length;
// Trigger pulse if count increased (but not on initial mount when both are 0) // Trigger pulse if count increased
if (currentCount > prevCount && !(prevCount === 0 && currentCount === 0)) { if (currentCount > prevCount) {
setMemberPulse(true); setMemberPulse(true);
const timer = setTimeout(() => setMemberPulse(false), 10000); const timer = setTimeout(() => setMemberPulse(false), 10000);
prevMemberCountRef.current = currentCount; prevMemberCountRef.current = currentCount;
@@ -613,7 +627,7 @@ function ChatItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProps)
) )
)} )}
</p> </p>
) : message.text && ( ) : message.text && message.text !== 'N/A' && (
<p className="chatItem__text"> <p className="chatItem__text">
<MessageText text={message.text} onLinkClick={onLinkClick} /> <MessageText text={message.text} onLinkClick={onLinkClick} />
</p> </p>
@@ -652,7 +666,7 @@ function MemberItem({ message, isSelected, onSelect, onLinkClick }: ChatItemProp
) )
)} )}
</p> </p>
) : message.text && ( ) : message.text && message.text !== 'N/A' && (
<p className="memberItem__text"> <p className="memberItem__text">
<MessageText text={message.text} onLinkClick={onLinkClick} /> <MessageText text={message.text} onLinkClick={onLinkClick} />
</p> </p>
+4 -2
View File
@@ -629,7 +629,7 @@ main {
background: #1f1f1f; background: #1f1f1f;
border: 1px solid #2a2a2a; border: 1px solid #2a2a2a;
text-align: left; text-align: left;
transition: all 150ms ease; transition: all 250ms ease-out;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
@@ -647,6 +647,7 @@ main {
background: rgba(59, 130, 246, 0.15); background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.5); border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
filter: brightness(0.85);
} }
.chatItem__header { .chatItem__header {
@@ -781,7 +782,7 @@ main {
background: #1f1f1f; background: #1f1f1f;
border: 1px solid #2a2a2a; border: 1px solid #2a2a2a;
text-align: left; text-align: left;
transition: all 150ms ease; transition: all 250ms ease-out;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -796,6 +797,7 @@ main {
background: rgba(16, 185, 129, 0.15); background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.5); border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
filter: brightness(0.85);
} }
.memberItem__header { .memberItem__header {
+3 -3
View File
@@ -89,7 +89,7 @@ export default function OverlayPage() {
) )
)} )}
</p> </p>
) : message.text && ( ) : message.text && message.text !== 'N/A' && (
<p className="overlay__superchat-text">{message.text}</p> <p className="overlay__superchat-text">{message.text}</p>
)} )}
</> </>
@@ -119,7 +119,7 @@ export default function OverlayPage() {
) )
)} )}
</p> </p>
) : message.text && ( ) : message.text && message.text !== 'N/A' && (
<p className="overlay__membership-text">{message.text}</p> <p className="overlay__membership-text">{message.text}</p>
)} )}
</> </>
@@ -156,7 +156,7 @@ export default function OverlayPage() {
) )
)} )}
</p> </p>
) : message.text && ( ) : message.text && message.text !== 'N/A' && (
<p className="overlay__text">{message.text}</p> <p className="overlay__text">{message.text}</p>
)} )}
</> </>