[next] Delay showing loading spinner (#2090)

* feat: delay showing loading spinner

* fix: snapshots

* fix: lint

* fix: make delay duration shorter

src/core/client/admin/routes/configure/sections/auth/containers/AuthContainer.tsx

@@ -8,7 +8,7 @@ import { graphql } from "react-relay";
 import { AuthContainerQueryResponse } from "talk-admin/__generated__/AuthContainerQuery.graphql";
 import { TalkContext, withContext } from "talk-framework/lib/bootstrap";
 import { getMessage } from "talk-framework/lib/i18n";
-import { Spinner } from "talk-ui/components";
+import { Delay, Spinner } from "talk-ui/components";
 
 import {
   AddSubmitHook,
@@ -119,5 +119,11 @@ AuthContainer.routeConfig = {
   `,
   cacheConfig: { force: true },
   render: ({ Component, props }) =>
-    props && Component ? <Component {...props} /> : <Spinner />,
+    props && Component ? (
+      <Component {...props} />
+    ) : (
+      <Delay>
+        <Spinner />
+      </Delay>
+    ),
 };

src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx

@@ -11,7 +11,7 @@ import {
 import { PermalinkViewQuery as QueryTypes } from "talk-stream/__generated__/PermalinkViewQuery.graphql";
 import { PermalinkViewQueryLocal as Local } from "talk-stream/__generated__/PermalinkViewQueryLocal.graphql";
 
-import { Spinner } from "talk-ui/components";
+import { Delay, Spinner } from "talk-ui/components";
 import PermalinkViewContainer from "../containers/PermalinkViewContainer";
 
 interface InnerProps {
@@ -42,7 +42,11 @@ export const render = ({
       />
     );
   }
-  return <Spinner />;
+  return (
+    <Delay>
+      <Spinner />
+    </Delay>
+  );
 };
 
 const PermalinkViewQuery: StatelessComponent<InnerProps> = ({

src/core/client/stream/tabs/comments/queries/StreamQuery.tsx

@@ -8,7 +8,7 @@ import {
 } from "talk-framework/lib/relay";
 import { StreamQuery as QueryTypes } from "talk-stream/__generated__/StreamQuery.graphql";
 import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQueryLocal.graphql";
-import { Spinner } from "talk-ui/components";
+import { Delay, Spinner } from "talk-ui/components";
 import StreamContainer from "../containers/StreamContainer";
 
 interface InnerProps {
@@ -40,7 +40,11 @@ export const render = ({
     );
   }
 
-  return <Spinner />;
+  return (
+    <Delay>
+      <Spinner />
+    </Delay>
+  );
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({

src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap

@@ -6,7 +6,13 @@ exports[`renders error 1`] = `
 </div>
 `;
 
-exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
+exports[`renders loading 1`] = `
+<Delay
+  ms={500}
+>
+  <withPropsOnChange(Spinner) />
+</Delay>
+`;
 
 exports[`renders permalink view container 1`] = `
 <withContext(withContext(createMutationContainer(Relay(PermalinkViewContainer))))

src/core/client/stream/tabs/comments/queries/__snapshots__/StreamQuery.spec.tsx.snap

@@ -6,7 +6,13 @@ exports[`renders error 1`] = `
 </div>
 `;
 
-exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
+exports[`renders loading 1`] = `
+<Delay
+  ms={500}
+>
+  <withPropsOnChange(Spinner) />
+</Delay>
+`;
 
 exports[`renders stream container 1`] = `
 <Relay(StreamContainer)

src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx

@@ -9,7 +9,7 @@ import {
 } from "talk-framework/lib/relay";
 import { ProfileQuery as QueryTypes } from "talk-stream/__generated__/ProfileQuery.graphql";
 import { ProfileQueryLocal as Local } from "talk-stream/__generated__/ProfileQueryLocal.graphql";
-import { Spinner } from "talk-ui/components";
+import { Delay, Spinner } from "talk-ui/components";
 
 import ProfileContainer from "../containers/ProfileContainer";
 
@@ -49,7 +49,11 @@ export const render = ({
     );
   }
 
-  return <Spinner />;
+  return (
+    <Delay>
+      <Spinner />
+    </Delay>
+  );
 };
 
 const ProfileQuery: StatelessComponent<InnerProps> = ({

src/core/client/ui/components/Delay/Delay.mdx

@@ -0,0 +1,22 @@
+---
+name: Delay
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Delay from "./Delay.tsx";
+import HorizontalGutter from "../HorizontalGutter";
+import Spinner from "../Spinner";
+
+# Delay
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter size="double">
+    <div>Spinner will show up in 3 seconds</div>
+    <Delay>
+      <Spinner />
+    </Delay>
+  </HorizontalGutter>
+</Playground>

src/core/client/ui/components/Delay/Delay.spec.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Delay from "./Delay";
+
+it("renders correctly", () => {
+  jest.useFakeTimers();
+  try {
+    const props: PropTypesOf<typeof Delay> = {
+      children: "custom",
+      ms: 3000,
+    };
+    const renderer = TestRenderer.create(<Delay {...props}>Hello</Delay>);
+    expect(renderer.toJSON()).toMatchSnapshot();
+    jest.advanceTimersByTime(3000);
+    expect(renderer.toJSON()).toMatchSnapshot();
+  } finally {
+    jest.useRealTimers();
+  }
+});

src/core/client/ui/components/Delay/Delay.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Component } from "react";
+
+interface Props {
+  ms?: number;
+  children: React.ReactNode;
+}
+
+interface State {
+  render: boolean;
+}
+
+export class Delay extends Component<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    ms: 500,
+  };
+  private timeout: any;
+  public state = {
+    render: false,
+  };
+  constructor(props: Props) {
+    super(props);
+    this.timeout = setTimeout(() => {
+      this.setState({ render: true });
+    }, props.ms);
+  }
+  public componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+  public render() {
+    if (!this.state.render) {
+      return null;
+    }
+    return <>{this.props.children}</>;
+  }
+}
+
+export default Delay;

src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `null`;
+
+exports[`renders correctly 2`] = `"Hello"`;

src/core/client/ui/components/Delay/index.ts

@@ -0,0 +1 @@
+export { default } from "./Delay";

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

@@ -27,3 +27,4 @@ export { SelectField, Option, OptGroup } from "./SelectField";
 export { default as TextLink } from "./TextLink";
 export { default as CheckBox } from "./CheckBox";
 export { default as RadioButton } from "./RadioButton";
+export { default as Delay } from "./Delay";