diff --git a/src/core/client/admin/routes/configure/sections/auth/containers/AuthContainer.tsx b/src/core/client/admin/routes/configure/sections/auth/containers/AuthContainer.tsx
index 0283a1128..ec1875d3b 100644
--- a/src/core/client/admin/routes/configure/sections/auth/containers/AuthContainer.tsx
+++ b/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>
+    ),
 };
diff --git a/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx b/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx
index 8e6b6db8d..897a6f04a 100644
--- a/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx
+++ b/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> = ({
diff --git a/src/core/client/stream/tabs/comments/queries/StreamQuery.tsx b/src/core/client/stream/tabs/comments/queries/StreamQuery.tsx
index 0f27f2be6..57ddcd0f2 100644
--- a/src/core/client/stream/tabs/comments/queries/StreamQuery.tsx
+++ b/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> = ({
diff --git a/src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
index ec6352698..45a9c24f5 100644
--- a/src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
+++ b/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))))
diff --git a/src/core/client/stream/tabs/comments/queries/__snapshots__/StreamQuery.spec.tsx.snap b/src/core/client/stream/tabs/comments/queries/__snapshots__/StreamQuery.spec.tsx.snap
index c84ddc81f..e4a540200 100644
--- a/src/core/client/stream/tabs/comments/queries/__snapshots__/StreamQuery.spec.tsx.snap
+++ b/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)
diff --git a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx
index 564f77d45..40db4fe01 100644
--- a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx
+++ b/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> = ({
diff --git a/src/core/client/ui/components/Delay/Delay.mdx b/src/core/client/ui/components/Delay/Delay.mdx
new file mode 100644
index 000000000..9a3375d97
--- /dev/null
+++ b/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>
diff --git a/src/core/client/ui/components/Delay/Delay.spec.tsx b/src/core/client/ui/components/Delay/Delay.spec.tsx
new file mode 100644
index 000000000..c7374d07d
--- /dev/null
+++ b/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();
+  }
+});
diff --git a/src/core/client/ui/components/Delay/Delay.tsx b/src/core/client/ui/components/Delay/Delay.tsx
new file mode 100644
index 000000000..6b06b3441
--- /dev/null
+++ b/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;
diff --git a/src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap b/src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap
new file mode 100644
index 000000000..840f2a190
--- /dev/null
+++ b/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"`;
diff --git a/src/core/client/ui/components/Delay/index.ts b/src/core/client/ui/components/Delay/index.ts
new file mode 100644
index 000000000..a478b6813
--- /dev/null
+++ b/src/core/client/ui/components/Delay/index.ts
@@ -0,0 +1 @@
+export { default } from "./Delay";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 980d962d1..7744d0068 100644
--- a/src/core/client/ui/components/index.ts
+++ b/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";