Show nice error message on network time out (#3036)

Shows "Network error. Please refresh your page
and try again." when the retry middleware times
out from too many attempts on failed/timed out
requests.

CORL-1199

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -0,0 +1,13 @@
+.root {
+  background-color: var(--palette-error-300);
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  color: var(--palette-text-500);
+
+  border-radius: var(--round-corners);
+
+  padding: var(--spacing-3);
+}

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

@@ -0,0 +1,16 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import styles from "./NetworkError.css";
+
+const NetworkError: FunctionComponent = () => {
+  return (
+    <div className={styles.root}>
+      <Localized id="common-networkError">
+        <div>Network error. Please refresh your page and try again.</div>
+      </Localized>
+    </div>
+  );
+};
+
+export default NetworkError;

src/core/client/framework/lib/relay/QueryRenderer.tsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { QueryRenderer } from "react-relay";
 import { OperationType } from "relay-runtime";
 
+import NetworkError from "coral-framework/components/NetworkError";
 import { PropTypesOf } from "coral-framework/types";
 
 import { CoralContextConsumer } from "../bootstrap/CoralContext";
@@ -33,7 +34,20 @@ class CoralQueryRenderer<
     return (
       <CoralContextConsumer>
         {({ relayEnvironment }) => (
-          <QueryRenderer environment={relayEnvironment} {...this.props} />
+          <QueryRenderer
+            environment={relayEnvironment}
+            {...this.props}
+            render={(args) => {
+              if (
+                args.error &&
+                args.error.name === "RRNLRetryMiddlewareError"
+              ) {
+                return <NetworkError />;
+              }
+
+              return this.props.render(args);
+            }}
+          />
         )}
       </CoralContextConsumer>
     );

src/locales/en-US/common.ftl

@@ -7,3 +7,4 @@ common-banEmailTemplate =
   Someone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, react or report comments.
 
 common-embedNotFound = Requested media could not be found. May have been deleted.
+common-networkError = Network error. Please refresh your page and try again.