fix read receipts trickling down correctly (#9567)

src/components/views/avatars/MemberAvatar.tsx

@@ -99,3 +99,11 @@ export default function MemberAvatar({
         />
     );
 }
+
+export class LegacyMemberAvatar extends React.Component<IProps> {
+    public render(): JSX.Element {
+        return <MemberAvatar {...this.props}>
+            { this.props.children }
+        </MemberAvatar>;
+    }
+}

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -21,7 +21,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import NodeAnimator from "../../../NodeAnimator";
 import { toPx } from "../../../utils/units";
-import MemberAvatar from '../avatars/MemberAvatar';
+import { LegacyMemberAvatar as MemberAvatar } from '../avatars/MemberAvatar';
 import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
 
 export interface IReadReceiptInfo {