Message List: Fix loading media after focusing

src/components/middle/MessageList.tsx

@@ -162,6 +162,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
   const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId));
 
   const areMessagesLoaded = Boolean(messageIds);
+  const isFocusing = Boolean(focusingId);
+
   useOnChange(() => {
     // We only need it first time when message list appears
     if (areMessagesLoaded) {
@@ -232,15 +234,17 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
 
   useOnChange(() => {
     memoFocusingIdRef.current = focusingId;
+  }, [focusingId]);
 
-    if (focusingId) {
+  useOnChange(() => {
+    if (isFocusing) {
       freezeForMedia();
       freezeForReading();
     } else {
       unfreezeForReading();
       unfreezeForMedia();
     }
-  }, [focusingId]);
+  }, [isFocusing]);
 
   const { observe: observeIntersectionForAnimatedStickers } = useIntersectionObserver({
     rootRef: containerRef,
@@ -541,7 +545,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
           containerRef={containerRef}
           className="messages-container"
           messageIds={messageIds || [lastMessage!.id]}
-          focusingId={focusingId}
+          isFocusing={isFocusing}
           loadMoreForwards={loadMoreForwards}
           loadMoreBackwards={loadMoreBackwards}
           isViewportNewest={isViewportNewest}

src/components/middle/MessageScroll.tsx

@@ -10,7 +10,7 @@ type OwnProps = {
   containerRef: MutableRefObject<HTMLDivElement | null>;
   className: string;
   messageIds: number[];
-  focusingId?: number;
+  isFocusing: boolean;
   loadMoreForwards?: NoneToVoidFunction;
   loadMoreBackwards?: NoneToVoidFunction;
   isViewportNewest?: boolean;
@@ -27,7 +27,7 @@ const MessageScroll: FC<OwnProps> = ({
   containerRef,
   className,
   messageIds,
-  focusingId,
+  isFocusing,
   loadMoreForwards,
   loadMoreBackwards,
   isViewportNewest,
@@ -117,7 +117,6 @@ const MessageScroll: FC<OwnProps> = ({
 
   useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
 
-  const isFocusing = Boolean(focusingId);
   useOnChange(() => {
     if (isFocusing) {
       freezeForLoadMore();