Fix-timeline-loading (#1506)

* fix timeline jump to search item after markAsRead

* improve pagination logic

* add jumbo emoji support in msg rendering

src/app/organisms/room/RoomTimeline.tsx

@@ -137,6 +137,13 @@ import initMatrix from '../../../client/initMatrix';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import cons from '../../../client/state/cons';
 import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
+import { EMOJI_PATTERN, VARIATION_SELECTOR_PATTERN } from '../../utils/regex';
+
+// Thumbs up emoji found to have Variation Selector 16 at the end
+// so included variation selector pattern in regex
+const JUMBO_EMOJI_REG = new RegExp(
+  `^(((${EMOJI_PATTERN})|(:.+?:))(${VARIATION_SELECTOR_PATTERN}|\\s)*){1,10}$`
+);
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -334,6 +341,7 @@ const useTimelinePagination = (
 
     return async (backwards: boolean) => {
       if (fetching) return;
+      const targetTimeline = timelineRef.current;
       const { linkedTimelines: lTimelines } = timelineRef.current;
       const timelinesEventsCount = lTimelines.map(timelineToEventsCount);
 
@@ -373,6 +381,7 @@ const useTimelinePagination = (
       }
 
       fetching = false;
+      if (targetTimeline !== timelineRef.current) return;
       if (alive()) {
         recalibratePagination(lTimelines, timelinesEventsCount, backwards);
       }
@@ -582,7 +591,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         focusItem.current = {
           index: evtAbsIndex,
           scrollTo: true,
-          highlight: evtId !== unreadInfo?.readUptoEventId,
+          highlight: evtId !== readUptoEventIdRef.current,
         };
         setTimeline({
           linkedTimelines: lTimelines,
@@ -592,7 +601,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           },
         });
       },
-      [unreadInfo, alive]
+      [alive]
     ),
     useCallback(() => {
       if (!alive()) return;
@@ -990,12 +999,16 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
 
       if (typeof body !== 'string') return null;
+      const jumboEmoji = JUMBO_EMOJI_REG.test(body);
+
       return (
         <Text
           as="div"
           style={{
             whiteSpace: typeof customBody === 'string' ? 'initial' : 'pre-wrap',
             wordBreak: 'break-word',
+            fontSize: jumboEmoji ? '1.504em' : undefined,
+            lineHeight: jumboEmoji ? '1.4962em' : undefined,
           }}
           priority="400"
         >