Miglesiasvalle skeleton (#450)

* Updates loading spinner into shimmering dashboard loader

* Removing some /test folders

* Removes test folders

* Uses greys from our color variables

* Updates duration to match LPL and fixes lint errors

amundsen_application/static/js/components/DashboardPage/ImagePreview/index.spec.tsx

@@ -6,7 +6,7 @@ import Linkify from 'react-linkify'
 
 import { ImagePreview, ImagePreviewProps } from './';
 
-import LoadingSpinner from 'components/common/LoadingSpinner';
+import ShimmeringDashboardLoader from '../ShimmeringDashboardLoader';
 
 import * as Constants from './constants';
 
@@ -61,17 +61,14 @@ describe('ImagePreview', () => {
           wrapper = setup().wrapper;
           wrapper.instance().setState({ isLoading: true, hasError: false });
         });
-        it('renders the loading spinner', () => {
-          expect(wrapper.find(LoadingSpinner).exists()).toBeTruthy();
+
+        it('renders the loading dashboard', () => {
+          expect(wrapper.find(ShimmeringDashboardLoader).exists()).toBeTruthy();
         });
 
         it('renders hidden img', () => {
           expect(wrapper.find('img').props().style).toEqual({ visibility: 'hidden' });
         });
-
-        it('renders loading text', () => {
-          expect(wrapper.text()).toContain(Constants.LOADING_TEXT);
-        });
       });
 
       describe('when not loading', () => {

amundsen_application/static/js/components/DashboardPage/ImagePreview/index.tsx

 import * as React from 'react';
-
 import Linkify from 'react-linkify'
 
-import LoadingSpinner from 'components/common/LoadingSpinner';
+import ShimmeringDashboardLoader from '../ShimmeringDashboardLoader';
 
 import * as Constants from './constants';
 import './styles.scss';
@@ -42,8 +41,7 @@ export class ImagePreview extends React.Component<ImagePreviewProps, ImagePrevie
         {
           this.state.isLoading &&
           <div className="text-placeholder">
-            <LoadingSpinner />
-            { Constants.LOADING_TEXT }
+            <ShimmeringDashboardLoader />
           </div>
         }
         {
@@ -68,3 +66,4 @@ export class ImagePreview extends React.Component<ImagePreviewProps, ImagePrevie
 }
 
 export default ImagePreview;
+

amundsen_application/static/js/components/DashboardPage/ShimmeringDashboardLoader/index.spec.tsx

+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import ShimmeringDashboardLoader from './';
+
+const setup = () => {
+  const wrapper = shallow(<ShimmeringDashboardLoader />);
+
+  return wrapper;
+};
+
+describe('ShimmeringDashboardLoader', () => {
+  describe('render', () => {
+    it('should render without errors', () => {
+      expect(() => {setup()}).not.toThrow();
+    });
+
+    it('should render three rows', () => {
+      const expected = 3;
+      const actual = setup().find('.shimmer-loader-row').length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render six cells', () => {
+      const expected = 6;
+      const actual = setup().find('.shimmer-loader-cell').length;
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

amundsen_application/static/js/components/DashboardPage/ShimmeringDashboardLoader/index.tsx

+import * as React from "react";
+
+import "./styles.scss";
+
+const ShimmeringDashboardLoader: React.FC = () => {
+  return (<div className="shimmer-loader">
+    <div className="shimmer-loader-row">
+      <div className="shimmer-loader-cell double animate" />
+      <div className="shimmer-loader-cell simple animate" />
+    </div>
+    <div className="shimmer-loader-row">
+      <div className="shimmer-loader-cell simple animate" />
+      <div className="shimmer-loader-cell double animate" />
+    </div>
+    <div className="shimmer-loader-row">
+      <div className="shimmer-loader-cell double animate" />
+      <div className="shimmer-loader-cell simple animate" />
+    </div>
+  </div>);
+};
+
+export default ShimmeringDashboardLoader;

amundsen_application/static/js/components/DashboardPage/ShimmeringDashboardLoader/styles.scss

+@import 'variables';
+
+$loading-duration: 1s;
+$gradient-start-color: $gray5;
+$gradient-end-color: $gray15;
+$shimmer-border-radius: 4px;
+$shimmer-border-color: $gray20;
+$shimmer-height: 22vh;
+$shimmer-block-spacing: 16px;
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.animate {
+  animation : shimmer $loading-duration infinite;
+  background: linear-gradient(to right, $gradient-start-color 4%, $gradient-end-color 25%, $gradient-start-color 36%);
+  background-size: 1000px 100%;
+}
+
+.shimmer-loader {
+  width: 100%;
+  border: 1px solid $shimmer-border-color;
+  border-radius: $shimmer-border-radius;
+  height: $shimmer-height;
+  display: flex;
+  justify-content: space-around;
+  padding: $shimmer-block-spacing;
+}
+.shimmer-loader-row {
+  height: 100%;
+  flex-basis: 33%;
+  margin-right: $shimmer-block-spacing;
+  display: flex;
+  flex-direction: column;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.shimmer-loader-cell {
+  border-radius: $shimmer-border-radius;
+  margin-bottom: $shimmer-block-spacing;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &.simple {
+    height: 40%;
+  }
+  &.double {
+    height: 60%;
+  }
+}
+

amundsen_application/static/js/components/Feedback/FeedbackForm/tests/index.spec.tsx → amundsen_application/static/js/components/Feedback/FeedbackForm/index.spec.tsx

@@ -4,13 +4,13 @@ import { shallow } from 'enzyme';
 
 import LoadingSpinner from 'components/common/LoadingSpinner';
 import { SendingState } from 'interfaces';
-import FeedbackForm, { FeedbackFormProps } from '../';
-import { RatingFeedbackForm } from '../RatingFeedbackForm';
+import FeedbackForm, { FeedbackFormProps } from '.';
+import { RatingFeedbackForm } from './RatingFeedbackForm';
 
 import {
   SUBMIT_FAILURE_MESSAGE,
   SUBMIT_SUCCESS_MESSAGE,
-} from '../../constants';
+} from '../constants';
 
 const mockFormData = { key1: 'val1', key2: 'val2' };
 // @ts-ignore: How to mock FormData without TypeScript error?

amundsen_application/static/js/components/Feedback/tests/index.spec.tsx → amundsen_application/static/js/components/Feedback/index.spec.tsx

@@ -2,17 +2,17 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import BugReportFeedbackForm from '../FeedbackForm/BugReportFeedbackForm';
-import RatingFeedbackForm from '../FeedbackForm/RatingFeedbackForm';
-import RequestFeedbackForm from '../FeedbackForm/RequestFeedbackForm';
-import Feedback, { FeedbackProps, FeedbackType } from '../';
+import BugReportFeedbackForm from './FeedbackForm/BugReportFeedbackForm';
+import RatingFeedbackForm from './FeedbackForm/RatingFeedbackForm';
+import RequestFeedbackForm from './FeedbackForm/RequestFeedbackForm';
+import Feedback, { FeedbackProps, FeedbackType } from '.';
 import {
   BUG_REPORT_TEXT,
   BUTTON_CLOSE_TEXT,
   FEEDBACK_TYPE_TEXT,
   RATING_TEXT,
   REQUEST_TEXT,
-} from '../constants';
+} from './constants';
 
 describe('Feedback', () => {
   const setStateSpy = jest.spyOn(Feedback.prototype, 'setState');

amundsen_application/static/js/components/Footer/tests/index.spec.tsx → amundsen_application/static/js/components/Footer/index.spec.tsx

 import * as React from 'react';
 import { shallow } from 'enzyme';
 
-import { Footer, FooterProps, mapDispatchToProps, mapStateToProps } from '../';
+import { Footer, FooterProps, mapDispatchToProps, mapStateToProps } from '.';
 
 import globalState from 'fixtures/globalState';
 

amundsen_application/static/js/components/HomePage/tests/index.spec.tsx → amundsen_application/static/js/components/HomePage/index.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { mapDispatchToProps, HomePage, HomePageProps } from '../';
+import { mapDispatchToProps, HomePage, HomePageProps } from '.';
 
 import Breadcrumb from 'components/common/Breadcrumb';
 import MyBookmarks from 'components/common/Bookmark/MyBookmarks';

amundsen_application/static/js/components/NavBar/tests/index.spec.tsx → amundsen_application/static/js/components/NavBar/index.spec.tsx

@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
 import { Link, NavLink } from 'react-router-dom';
-import { NavBar, NavBarProps, mapStateToProps } from '../';
+import { NavBar, NavBarProps, mapStateToProps } from '.';
 import { getMockRouterProps } from 'fixtures/mockRouter';
 
 import Feedback from 'components/Feedback';

amundsen_application/static/js/components/NotFoundPage/tests/index.spec.tsx → amundsen_application/static/js/components/NotFoundPage/index.spec.tsx

@@ -4,7 +4,7 @@ import * as DocumentTitle from 'react-document-title';
 import { shallow } from 'enzyme';
 
 import Breadcrumb from 'components/common/Breadcrumb';
-import NotFoundPage from '../';
+import NotFoundPage from '.';
 
 describe('NotFoundPage', () => {
     let subject;

amundsen_application/static/js/components/SearchPage/index.spec.tsx

@@ -5,7 +5,7 @@ import * as History from 'history';
 import { shallow } from 'enzyme';
 
 import { ResourceType } from 'interfaces';
-import { mapDispatchToProps, mapStateToProps, SearchPage, SearchPageProps } from './';
+import { mapDispatchToProps, mapStateToProps, SearchPage, SearchPageProps } from '.';
 import {
   DOCUMENT_TITLE_SUFFIX,
   PAGE_INDEX_ERROR_MESSAGE,

amundsen_application/static/js/components/TableDetail/ColumnStats/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/ColumnStats/index.spec.tsx

 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { ColumnStats, ColumnStatsProps } from '../';
+import { ColumnStats, ColumnStatsProps } from '.';
 
 
 describe('ColumnStats', () => {

amundsen_application/static/js/components/TableDetail/EditableSection/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/EditableSection/index.spec.tsx

 import * as React from 'react';
 import { shallow } from 'enzyme';
 
-import { EditableSection, EditableSectionProps } from '../';
+import { EditableSection, EditableSectionProps } from '.';
 import TagInput from 'components/Tags/TagInput';
 import { ResourceType } from 'interfaces/Resources';
 

amundsen_application/static/js/components/TableDetail/ReportTableIssue/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/ReportTableIssue/index.spec.tsx

@@ -10,7 +10,7 @@ import {
   ReportTableIssueProps,
   mapDispatchToProps,
   mapStateToProps,
-} from '..';
+} from '.';
 import { NotificationType } from 'interfaces';
 
 const mockFormData = {

amundsen_application/static/js/components/TableDetail/RequestDescriptionText/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/RequestDescriptionText/index.spec.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { RequestDescriptionText, mapDispatchToProps, RequestDescriptionTextProps } from '../';
+import { RequestDescriptionText, mapDispatchToProps, RequestDescriptionTextProps } from '.';
 import globalState from 'fixtures/globalState';
-import { REQUEST_DESCRIPTION } from '../constants';
+import { REQUEST_DESCRIPTION } from './constants';
 import { RequestMetadataType } from 'interfaces';
 
 describe('RequestDescriptionText', () => {

amundsen_application/static/js/components/TableDetail/RequestMetadataForm/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/RequestMetadataForm/index.spec.tsx

@@ -5,7 +5,7 @@ import FlashMessage from 'components/common/FlashMessage';
 
 import globalState from 'fixtures/globalState';
 import { NotificationType, RequestMetadataType, SendingState } from 'interfaces';
-import { RequestMetadataForm, mapDispatchToProps, mapStateToProps, RequestMetadataProps } from '../';
+import { RequestMetadataForm, mapDispatchToProps, mapStateToProps, RequestMetadataProps } from '.';
 import {
   TITLE_TEXT,
   FROM_LABEL,
@@ -21,7 +21,7 @@ import {
   SEND_FAILURE_MESSAGE,
   SEND_INPROGRESS_MESSAGE,
   SEND_SUCCESS_MESSAGE,
-} from '../constants'
+} from './constants'
 
 const mockFormData = {
   'recipients': 'test1@test.com,test2@test.com',

amundsen_application/static/js/components/TableDetail/TableHeaderBullets/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/TableHeaderBullets/index.spec.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { mocked } from 'ts-jest/utils';
 import { shallow } from 'enzyme';
 
-import TableHeaderBullets, { TableHeaderBulletsProps } from '../';
+import TableHeaderBullets, { TableHeaderBulletsProps } from '.';
 
 import { ResourceType } from 'interfaces/Resources';
 

amundsen_application/static/js/components/TableDetail/TableIssues/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/TableIssues/index.spec.tsx

@@ -10,7 +10,7 @@ import {
   TableIssueProps,
   mapStateToProps,
   mapDispatchToProps
-} from '..';
+} from '.';
 
 import { NO_DATA_ISSUES_TEXT } from "components/TableDetail/TableIssues/constants";
 import ReportTableIssue from 'components/TableDetail/ReportTableIssue';

amundsen_application/static/js/components/TableDetail/WatermarkLabel/tests/index.spec.tsx → amundsen_application/static/js/components/TableDetail/WatermarkLabel/index.spec.tsx

 import * as React from 'react';
 
 import { shallow, mount } from 'enzyme';
-import WatermarkLabel, { WatermarkLabelProps } from '../';
+import WatermarkLabel, { WatermarkLabelProps } from '.';
 import {
   NO_WATERMARK_LINE_1,
   NO_WATERMARK_LINE_2,

amundsen_application/static/js/components/Tags/TagInfo/tests/index.spec.tsx → amundsen_application/static/js/components/Tags/TagInfo/index.spec.tsx

 import * as React from 'react';
 import { shallow } from 'enzyme';
 
-import { mapDispatchToProps, TagInfo, TagInfoProps } from '../';
+import { mapDispatchToProps, TagInfo, TagInfoProps } from '.';
 
 import * as UtilMethods from 'ducks/utilMethods';