chore(home-screen): fixes for loading states, flicker issue, and reduction of api calls (#11557)

* fixes for loading states, flicker issue, api calls

* fix filter bug

* add high res images

* bug fixes for cards and face pile, change imgs to svgs, and address comments

* update from comments

* add stopprop

* fix tests

* add liscenses

* remove unused type

* fix types

* add license

* fix lint

superset-frontend/spec/javascripts/views/CRUD/welcome/Welcome_spec.tsx

@@ -17,14 +17,46 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import thunk from 'redux-thunk';
+import fetchMock from 'fetch-mock';
 import configureStore from 'redux-mock-store';
 import Welcome from 'src/views/CRUD/welcome/Welcome';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
+const chartsEndpoint = 'glob:*/api/v1/chart/?*';
+const dashboardEndpoint = 'glob:*/api/v1/dashboard/?*';
+const savedQueryEndpoint = 'glob:*/api/v1/saved_query/?*';
+
+fetchMock.get(chartsEndpoint, {
+  result: [
+    {
+      slice_name: 'ChartyChart',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/explore',
+      id: '4',
+      table: {},
+    },
+  ],
+});
+
+fetchMock.get(dashboardEndpoint, {
+  result: [
+    {
+      dashboard_title: 'Dashboard_Test',
+      changed_on_utc: '24 Feb 2014 10:13:14',
+      url: '/fakeUrl/dashboard',
+      id: '3',
+    },
+  ],
+});
+
+fetchMock.get(savedQueryEndpoint, {
+  result: [],
+});
+
 describe('Welcome', () => {
   const mockedProps = {
     user: {
@@ -37,7 +69,7 @@ describe('Welcome', () => {
       isActive: true,
     },
   };
-  const wrapper = shallow(<Welcome {...mockedProps} />, {
+  const wrapper = mount(<Welcome {...mockedProps} />, {
     context: { store },
   });
 
@@ -46,6 +78,13 @@ describe('Welcome', () => {
   });
 
   it('renders all panels on the page on page load', () => {
-    expect(wrapper.find('CollapsePanel')).toHaveLength(4);
+    expect(wrapper.find('CollapsePanel')).toHaveLength(8);
+  });
+
+  it('calls batch method on page load', () => {
+    const chartCall = fetchMock.calls(/chart\/\?q/);
+    const dashboardCall = fetchMock.calls(/dashboard\/\?q/);
+    expect(chartCall).toHaveLength(2);
+    expect(dashboardCall).toHaveLength(2);
   });
 });