[CORL-421, CORL-415] Live Comments on Stream (#2379)

* feat: support comment replies

* feat: comment created

* feat: live update top level comments

* feat: live updates on the stream embed

* fix: tests

* chore: refactor FadeInTransition

* fix: add missing translation and a live update bug

* fix: graqphql

* feat: improve loading experiene :-)

* fix: live comment bugs

* chore: adapt translation

* feat: stop live updates when story is closed or commenting is disabled

* test: add tests for stream live updates

* fix: remove forgotten piece of code

* fix: tests

src/core/client/framework/components/FadeInTransition.css

@@ -0,0 +1,8 @@
+.appear {
+  opacity: 0;
+  pointer-events: none;
+}
+.appearActive {
+  opacity: 1;
+  transition: opacity 400ms;
+}

src/core/client/framework/components/FadeInTransition.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from "react";
+import { CSSTransition } from "react-transition-group";
+
+import styles from "./FadeInTransition.css";
+
+interface Props {
+  active: boolean;
+  children: React.ReactNode;
+}
+
+const FadeInTransition: FunctionComponent<Props> = ({ children, active }) => {
+  if (!active) {
+    return <>{children}</>;
+  }
+  return (
+    <CSSTransition
+      in
+      appear
+      enter={false}
+      exit={false}
+      classNames={{
+        appear: styles.appear,
+        appearActive: styles.appearActive,
+      }}
+      timeout={600}
+    >
+      <div>{children}</div>
+    </CSSTransition>
+  );
+};
+export default FadeInTransition;

src/core/client/framework/components/index.ts

@@ -4,4 +4,5 @@ export { default as FacebookButton } from "./FacebookButton";
 export { default as GoogleButton } from "./GoogleButton";
 export { default as OIDCButton } from "./OIDCButton";
 export { default as Markdown } from "./Markdown";
+export { default as FadeInTransition } from "./FadeInTransition";
 export { default as DurationField, DURATION_UNIT } from "./DurationField";