diff --git a/ts/components/conversation/ReadableMessage.tsx b/ts/components/conversation/ReadableMessage.tsx
new file mode 100644
index 000000000..d5288e221
--- /dev/null
+++ b/ts/components/conversation/ReadableMessage.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFocus } from "../../hooks/useFocus"
+import { InView } from 'react-intersection-observer';
+
+type ReadableMessageProps = {
+    children: React.ReactNode;
+    id: string;
+    className: string;
+    onChange: (inView: boolean) => void;
+    onContextMenu: (e: any) => void
+}
+
+export const ReadableMessage = (props: ReadableMessageProps) => {
+
+    const { onChange } = props;
+    useFocus(onChange);
+
+    return (
+        <InView
+        {...props}
+        as="div"
+        threshold={1}
+        delay={200}
+        triggerOnce={true}
+        >
+        {props.children}
+        </InView>);
+}
diff --git a/ts/hooks/useFocus.ts b/ts/hooks/useFocus.ts
new file mode 100644
index 000000000..e3d3d510c
--- /dev/null
+++ b/ts/hooks/useFocus.ts
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export const useFocus = (action: (param: any) => void) => {
+  
+  useEffect(() => {
+    window.addEventListener("focus", action);
+    return () => {
+      window.removeEventListener("focus", action);
+    };
+  });
+}
\ No newline at end of file