[CORL-391] Fix jankiness when opening reply box of last comment in Stream (#2447)

* feat: add useResizeObserver hook

* fix: stream jumps when clicking on the last reply button when scrolled to the bottom

* chore: use resize observer in auth popup and simplify resize handling

* fix: snapshots and remove resize observer from stream

* fix: focus unmounted rte

src/core/client/stream/index.tsx

@@ -16,7 +16,9 @@ async function main() {
     initLocalState,
     localesData,
     userLocales: navigator.languages,
-    pym: new PymChild({ polling: 100 }),
+    pym: new PymChild({
+      polling: 100,
+    }),
   });
 
   const Index: FunctionComponent = () => (

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx

@@ -7,7 +7,7 @@ import sinon from "sinon";
 import { timeout } from "coral-common/utils";
 import { pureMerge } from "coral-common/utils";
 import { createPromisifiedStorage } from "coral-framework/lib/storage";
-import { removeFragmentRefs } from "coral-framework/testHelpers";
+import { removeFragmentRefs, wait } from "coral-framework/testHelpers";
 import { DeepPartial, PropTypesOf } from "coral-framework/types";
 import { ReplyCommentFormContainer } from "./ReplyCommentFormContainer";
 
@@ -181,7 +181,7 @@ it("autofocuses", async () => {
     .findWhere(n => n.prop("rteRef"))
     .props()
     .rteRef(rte);
-  expect(focusStub.calledOnce).toBe(true);
+  await wait(() => expect(focusStub.calledOnce).toBe(true));
 });
 
 it("renders when story has been closed", async () => {

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -59,6 +59,7 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
     submitStatus: null,
   };
   private contextKey = `replyCommentFormBody-${this.props.comment.id}`;
+  private rteRef: CoralRTE | null = null;
 
   constructor(props: Props) {
     super(props);
@@ -66,8 +67,10 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
   }
 
   private handleRTERef = (rte: CoralRTE | null) => {
-    if (rte && this.props.autofocus) {
-      rte.focus();
+    this.rteRef = rte;
+    if (this.rteRef && this.props.autofocus) {
+      // Delay focus a bit until iframe had a change to resize.
+      setTimeout(() => this.rteRef && this.rteRef.focus(), 100);
     }
   };