Adds placeholder-style loading to the ServiceItems

dashboard/src/components/AppList/__snapshots__/AppList.test.tsx.snap

@@ -54,6 +54,7 @@ exports[`when apps available matches the snapshot 1`] = `
   <main>
     <LoadingWrapper
       loaded={true}
+      type={0}
     >
       <div>
         <CardGrid>
@@ -95,6 +96,7 @@ exports[`when error present matches the snapshot 1`] = `
   <main>
     <LoadingWrapper
       loaded={true}
+      type={0}
     >
       <ErrorSelector
         action="list"
@@ -130,6 +132,7 @@ exports[`when error present renders a generic error message 1`] = `
   <main>
     <LoadingWrapper
       loaded={true}
+      type={0}
     >
       <ErrorSelector
         action="list"
@@ -196,6 +199,7 @@ exports[`when fetched but not apps available matches the snapshot 1`] = `
   <main>
     <LoadingWrapper
       loaded={true}
+      type={0}
     >
       <MessageAlertPage
         header="Supercharge your Kubernetes cluster"
@@ -267,6 +271,7 @@ exports[`while fetching apps loading spinner matches the snapshot 1`] = `
   <main>
     <LoadingWrapper
       loaded={false}
+      type={0}
     >
       <div />
     </LoadingWrapper>
@@ -328,6 +333,7 @@ exports[`while fetching apps matches the snapshot 1`] = `
   <main>
     <LoadingWrapper
       loaded={false}
+      type={0}
     >
       <div />
     </LoadingWrapper>

dashboard/src/components/AppUpgrade/__snapshots__/AppUpgrade.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;
 

dashboard/src/components/AppView/AccessURLTable/__snapshots__/AccessURLTable.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`when fetching ingresses or services loading spinner matches the snapsho
   <LoadingWrapper
     loaded={false}
     size="small"
+    type={0}
   >
     <table>
       <thead>
@@ -37,6 +38,7 @@ exports[`when fetching ingresses or services loading spinner matches the snapsho
   <LoadingWrapper
     loaded={false}
     size="small"
+    type={0}
   >
     <p>
       The current application does not expose a public URL.
@@ -53,6 +55,7 @@ exports[`when the app contain ingresses should show the table with available ing
   <LoadingWrapper
     loaded={true}
     size="small"
+    type={0}
   >
     <table>
       <thead>
@@ -96,6 +99,7 @@ exports[`when the app contain services and ingresses should show the table with
   <LoadingWrapper
     loaded={true}
     size="small"
+    type={0}
   >
     <table>
       <thead>
@@ -152,6 +156,7 @@ exports[`when the app contain services should show the table if any service is a
   <LoadingWrapper
     loaded={true}
     size="small"
+    type={0}
   >
     <table>
       <thead>

dashboard/src/components/AppView/DeploymentsTable/__snapshots__/DeploymentsTable.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`renders a deployment ready 1`] = `
   <LoadingWrapper
     loaded={true}
     size="small"
+    type={0}
   >
     <table>
       <thead>
@@ -53,6 +54,7 @@ exports[`when fetching deployments loading spinner matches the snapshot 1`] = `
   <LoadingWrapper
     loaded={false}
     size="small"
+    type={0}
   >
     <table>
       <thead>

dashboard/src/components/AppView/SecretsTable/__snapshots__/SecretsTable.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`renders a table with a secret 1`] = `
   <LoadingWrapper
     loaded={true}
     size="small"
+    type={0}
   >
     <table>
       <thead>
@@ -57,6 +58,7 @@ exports[`when fetching secrets loading spinner matches the snapshot 1`] = `
   <LoadingWrapper
     loaded={false}
     size="small"
+    type={0}
   >
     <table>
       <thead>

dashboard/src/components/AppView/ServicesTable/ServiceItem.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AlertTriangle } from "react-feather";
 
-import LoadingWrapper from "../../../components/LoadingWrapper";
+import LoadingWrapper, { LoaderType } from "../../../components/LoadingWrapper";
 import { IKubeItem, IResource, IServiceSpec, IServiceStatus } from "../../../shared/types";
 
 interface IServiceItemProps {
@@ -29,7 +29,7 @@ class ServiceItem extends React.Component<IServiceItemProps> {
     if (service === undefined || service.isFetching) {
       return (
         <td colSpan={4}>
-          <LoadingWrapper size="inline-small" />
+          <LoadingWrapper type={LoaderType.Placeholder} />
         </td>
       );
     }

dashboard/src/components/AppView/ServicesTable/__snapshots__/ServiceItem.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`when fetching services loading spinner matches the snapshot 1`] = `
   >
     <LoadingWrapper
       loaded={false}
-      size="inline-small"
+      type={1}
     />
   </td>
 </tr>
@@ -22,7 +22,7 @@ exports[`when fetching services loading spinner matches the snapshot 2`] = `
   >
     <LoadingWrapper
       loaded={false}
-      size="inline-small"
+      type={1}
     />
   </td>
 </tr>

dashboard/src/components/AppView/__snapshots__/AppControls.test.tsx.snap

@@ -3,11 +3,13 @@
 exports[`when name or namespace do not exist loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;
 
 exports[`when name or namespace do not exist loading spinner matches the snapshot 2`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;

dashboard/src/components/AppView/__snapshots__/AppView.test.tsx.snap

@@ -3,5 +3,6 @@
 exports[`AppViewComponent when app info is null loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;

dashboard/src/components/Catalog/__snapshots__/Catalog.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`renderization when charts available should render the list of charts 1`
   </PageHeader>
   <LoadingWrapper
     loaded={true}
+    type={0}
   >
     <CardGrid>
       <CatalogItem
@@ -65,6 +66,7 @@ exports[`renderization when fetching apps loading spinner matches the snapshot 1
   </PageHeader>
   <LoadingWrapper
     loaded={false}
+    type={0}
   >
     <CardGrid />
   </LoadingWrapper>

dashboard/src/components/ChartView/__snapshots__/ChartReadme.test.tsx.snap

@@ -3,5 +3,6 @@
 exports[`when readme is not present loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;

dashboard/src/components/ChartView/__snapshots__/ChartView.test.tsx.snap

@@ -3,11 +3,13 @@
 exports[`when fetching is false but no chart is available loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;
 
 exports[`when fetching is true and chart is available loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;

dashboard/src/components/Config/ServiceBrokerList/__snapshots__/ServiceBrokerList.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`if the service broker is not installed shows a warning message 1`] = `
   </PageHeader>
   <LoadingWrapper
     loaded={true}
+    type={0}
   >
     <ServiceCatalogNotInstalledAlert />
   </LoadingWrapper>
@@ -28,6 +29,7 @@ exports[`when all the brokers are loaded shows a forbiden (fetch) error if it ex
   </PageHeader>
   <LoadingWrapper
     loaded={true}
+    type={0}
   >
     <main>
       <ErrorSelector
@@ -125,6 +127,7 @@ exports[`when all the brokers are loaded shows a forbiden (resync) error if it e
     </PageHeader>
     <LoadingWrapper
       loaded={true}
+      type={0}
     >
       <main>
         <ErrorSelector
@@ -350,6 +353,7 @@ exports[`when all the brokers are loaded shows a warning to install no service b
     </PageHeader>
     <LoadingWrapper
       loaded={true}
+      type={0}
     >
       <main>
         <ServiceBrokersNotFoundAlert>
@@ -443,6 +447,7 @@ exports[`when all the brokers are loaded when there are no errors, renders the b
   </PageHeader>
   <LoadingWrapper
     loaded={true}
+    type={0}
   >
     <main>
       <CardGrid
@@ -483,6 +488,7 @@ exports[`while fetching brokers loading spinner matches the snapshot 1`] = `
   </PageHeader>
   <LoadingWrapper
     loaded={false}
+    type={0}
   >
     <main>
       <ServiceBrokersNotFoundAlert />
@@ -502,6 +508,7 @@ exports[`while fetching brokers matches the snapshot 1`] = `
   </PageHeader>
   <LoadingWrapper
     loaded={false}
+    type={0}
   >
     <main>
       <ServiceBrokersNotFoundAlert />

dashboard/src/components/DeploymentForm/DeploymentForm.test.tsx

@@ -109,7 +109,7 @@ it("renders the full DeploymentForm", () => {
   expect(wrapper).toMatchSnapshot();
 });
 
- it("renders a release name by default, relying in Monickers output", () => {
+it("renders a release name by default, relying in Monickers output", () => {
   const versions = [{ id: "foo", attributes: { version: "1.2.3" } }] as IChartVersion[];
   monikerChooseMock.mockImplementationOnce(() => "foo").mockImplementationOnce(() => "bar");
 

dashboard/src/components/DeploymentForm/__snapshots__/DeploymentForm.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`loading spinner matches the snapshot 1`] = `
 <LoadingWrapper
   loaded={false}
+  type={0}
 />
 `;
 

dashboard/src/components/LoadingWrapper/LoadingPlaceholder/LoadingPlaceholder.scss

@@ -0,0 +1,25 @@
+.LoadingPlaceholder {
+  height: 1em;
+  background-color: #f1f1f1;
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1em;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0),
+      rgba(255, 255, 255, 25%),
+      rgba(0, 0, 0, 0)
+    );
+    transform: translateX(-30%);
+    animation: loading 1.5s infinite;
+  }
+}
+
+@keyframes loading {
+  100% {
+    transform: translateX(100%);
+  }
+}

dashboard/src/components/LoadingWrapper/LoadingPlaceholder/LoadingPlaceholder.test.tsx

@@ -0,0 +1,8 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+import LoadingPlaceholder from "./LoadingPlaceholder";
+
+it("matches the snapshot", () => {
+  const wrapper = shallow(<LoadingPlaceholder />);
+  expect(wrapper).toMatchSnapshot();
+});

dashboard/src/components/LoadingWrapper/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import "./LoadingPlaceholder.css";
+
+// Renders a placeholder loader style
+// Based on https://kyusuf.com/post/fake-it-til-you-make-it-css/
+const LoadingPlaceholder: React.SFC = props => {
+  return <div className="LoadingPlaceholder" />;
+};
+
+export default LoadingPlaceholder;

dashboard/src/components/LoadingWrapper/LoadingPlaceholder/__snapshots__/LoadingPlaceholder.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches the snapshot 1`] = `
+<div
+  className="LoadingPlaceholder"
+/>
+`;

dashboard/src/components/LoadingWrapper/LoadingPlaceholder/index.ts

@@ -0,0 +1,3 @@
+import LoadingPlaceholder from "./LoadingPlaceholder";
+
+export default LoadingPlaceholder;

dashboard/src/components/LoadingWrapper/LoadingWrapper.test.tsx

@@ -1,7 +1,8 @@
 import { shallow } from "enzyme";
 import * as React from "react";
-import LoadingWrapper from ".";
+import LoadingWrapper, { LoaderType } from ".";
 import LoadingSpinner from "../LoadingSpinner";
+import LoadingPlaceholder from "./LoadingPlaceholder";
 
 let props = {} as any;
 
@@ -60,3 +61,11 @@ describe("when loaded is true", () => {
     expect(wrapper.find(ChildrenComponent)).toExist();
   });
 });
+
+describe("loader types", () => {
+  it("renders the LoadingPlaceholder type when specified", () => {
+    const wrapper = renderComponent({ type: LoaderType.Placeholder });
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(LoadingPlaceholder)).toExist();
+  });
+});