Qortal/chrome-extension
1
0
Fork 0
mirror of https://github.com/Qortal/chrome-extension.git synced 2025-03-28 08:15:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

reduce flicker on mobile

Browse Source
This commit is contained in:
PhilReact 2024-09-26 22:03:25 +03:00
parent 35f299b6cb
commit f36359454d
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Chat/ChatList.tsx
View File

@ -32,7 +32,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
if (virtuosoRef.current) { if (virtuosoRef.current) {
if (virtuosoRef.current && !isAtBottomRef.current) { if (virtuosoRef.current && !isAtBottomRef.current && hasUnreadMessages) {
@ -76,7 +76,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
}) })
const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1 const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1
if (virtuosoRef.current) { if (virtuosoRef.current) {
virtuosoRef.current.scrollToIndex({ index, behavior: 'smooth' }); virtuosoRef.current.scrollToIndex({ index});
} }
}; };
@ -126,7 +126,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
} }
return ( return (
<div style={{ padding: '10px 0', display: 'flex', justifyContent: 'center', width: '100%' }}> <div style={{ padding: '10px 0', display: 'flex', justifyContent: 'center', width: '100%', minHeight: '50px' , overscrollBehavior: "none"}}>
<MessageItem <MessageItem
isLast={index === messages.length - 1} isLast={index === messages.length - 1}
message={message} message={message}
@ -155,9 +155,9 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
atBottomThreshold={50} atBottomThreshold={50}
followOutput="smooth" followOutput="smooth"
onScroll={handleScroll} onScroll={handleScroll}
overscan={10}
increaseViewportBy={300}
atBottomStateChange={handleAtBottomStateChange} // Detect bottom status atBottomStateChange={handleAtBottomStateChange} // Detect bottom status
increaseViewportBy={3000}
/> />
{showScrollButton && ( {showScrollButton && (

5
src/components/Chat/MessageItem.tsx
View File

@ -13,6 +13,7 @@ import Underline from "@tiptap/extension-underline";
import { executeEvent } from "../../utils/events"; import { executeEvent } from "../../utils/events";
import { WrapperUserAction } from "../WrapperUserAction"; import { WrapperUserAction } from "../WrapperUserAction";
import ReplyIcon from "@mui/icons-material/Reply"; import ReplyIcon from "@mui/icons-material/Reply";
import { Spacer } from "../../common/Spacer";
export const MessageItem = ({ export const MessageItem = ({
message, message,
@ -120,9 +121,10 @@ export const MessageItem = ({
)} )}
</Box> </Box>
{reply && ( {reply && (
<>
<Spacer height="20px" />
<Box <Box
sx={{ sx={{
marginTop: '20px',
width: "100%", width: "100%",
borderRadius: "5px", borderRadius: "5px",
backgroundColor: "var(--bg-primary)", backgroundColor: "var(--bg-primary)",
@ -166,6 +168,7 @@ export const MessageItem = ({
)} )}
</Box> </Box>
</Box> </Box>
</>
)} )}
{message?.messageText && ( {message?.messageText && (
<MessageDisplay <MessageDisplay