Add placeholder loader for Track Panel (#577)

src/ensembl/src/content/app/about/About.tsx

@@ -28,7 +28,7 @@ import {
   TopMenu,
   SideMenu
 } from 'src/content/app/about/components/about-menu/AboutMenu';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import { Menu as MenuType } from 'src/shared/types/help-and-docs/menu';
 import { TextArticleData } from 'src/shared/types/help-and-docs/article';

src/ensembl/src/content/app/browser/browser-image/BrowserImage.test.tsx

@@ -27,7 +27,7 @@ jest.mock('src/content/app/browser/zmenu', () => ({
   ZmenuController: () => <div id="zmenuController" />
 }));
 
-jest.mock('src/shared/components/loader/Loader', () => ({
+jest.mock('src/shared/components/loader', () => ({
   CircleLoader: () => <div id="circleLoader" />
 }));
 

src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx

@@ -21,7 +21,7 @@ import isEqual from 'lodash/isEqual';
 
 import BrowserCogList from '../browser-cog/BrowserCogList';
 import { ZmenuController } from 'src/content/app/browser/zmenu';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 import Overlay from 'src/shared/components/overlay/Overlay';
 
 import browserMessagingService from 'src/content/app/browser/browser-messaging-service';

src/ensembl/src/content/app/browser/track-panel/TrackPanel.test.tsx

@@ -22,6 +22,10 @@ import { TrackPanel, TrackPanelProps } from './TrackPanel';
 
 import { createEnsObject } from 'tests/fixtures/ens-object';
 
+jest.mock('src/shared/components/loader', () => ({
+  SidebarLoader: () => <div className="sidebarLoader" />
+}));
+
 jest.mock('./track-panel-bar/TrackPanelBar', () => () => (
   <div className="trackPanel" />
 ));
@@ -54,7 +58,7 @@ describe('<TrackPanel />', () => {
       // defaultProps are insufficient for rendering anything useful
       // TODO: in the future, it might be a good idea to at least render a spinner here
       const { container } = renderTrackPanel();
-      expect(container.firstChild).toBeFalsy();
+      expect(container.querySelector('.sidebarLoader')).toBeTruthy();
     });
 
     it('renders TrackPanelList when necessary requirements are satisfied', () => {

src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

@@ -20,7 +20,7 @@ import isEqual from 'lodash/isEqual';
 
 import TrackPanelList from './track-panel-list/TrackPanelList';
 import TrackPanelModal from './track-panel-modal/TrackPanelModal';
-import { RootState } from 'src/store';
+import { SidebarLoader } from 'src/shared/components/loader';
 
 import { getIsTrackPanelModalOpened } from './trackPanelSelectors';
 import {
@@ -31,6 +31,7 @@ import {
 
 import { restoreBrowserTrackStates } from '../browserActions';
 
+import { RootState } from 'src/store';
 import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
 
 export type TrackPanelProps = {
@@ -55,7 +56,9 @@ export const TrackPanel = (props: TrackPanelProps) => {
     ) : (
       <TrackPanelList />
     )
-  ) : null;
+  ) : (
+    <SidebarLoader />
+  );
 };
 
 const mapStateToProps = (state: RootState) => {

src/ensembl/src/content/app/browser/zmenu/ZmenuInstantDownload.tsx

@@ -21,7 +21,7 @@ import { Pick2 } from 'ts-multipick';
 import { parseFeatureId } from '../browserHelper';
 
 import { InstantDownloadTranscript } from 'src/shared/components/instant-download';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import { FullTranscript } from 'src/shared/types/thoas/transcript';
 

src/ensembl/src/content/app/entity-viewer/components/example-links/ExampleLinks.tsx

@@ -25,7 +25,7 @@ import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers
 import { getEntityViewerActiveGenomeId } from 'src/content/app/entity-viewer/state/general/entityViewerGeneralSelectors';
 import { getGenomeExampleFocusObjects } from 'src/shared/state/genome/genomeSelectors';
 
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import { RootState } from 'src/store';
 

src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx

@@ -55,7 +55,7 @@ import GeneFunction, {
 } from 'src/content/app/entity-viewer/gene-view/components/gene-function/GeneFunction';
 import GeneRelationships from 'src/content/app/entity-viewer/gene-view/components/gene-relationships/GeneRelationships';
 import ViewInApp from 'src/shared/components/view-in-app/ViewInApp';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 import { TicksAndScale } from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler';
 import ShowHide from 'src/shared/components/show-hide/ShowHide';
 

src/ensembl/src/content/app/entity-viewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.tsx

@@ -19,7 +19,7 @@ import { useParams } from 'react-router-dom';
 import set from 'lodash/fp/set';
 import { Pick2 } from 'ts-multipick';
 
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 import ProteinDomainImage from 'src/content/app/entity-viewer/gene-view/components/protein-domain-image/ProteinDomainImage';
 import ProteinImage from 'src/content/app/entity-viewer/gene-view/components/protein-image/ProteinImage';
 import ProteinFeaturesCount from 'src/content/app/entity-viewer/gene-view/components/protein-features-count/ProteinFeaturesCount';
@@ -103,8 +103,9 @@ const ProteinsListItemInfo = (props: Props) => {
   const [transcriptWithProteinDomains, setTranscriptWithProteinDomains] =
     useState<TranscriptWithProteinDomains | null>(null);
 
-  const [proteinSummaryStats, setProteinSummaryStats] =
-    useState<ProteinStats | null | undefined>();
+  const [proteinSummaryStats, setProteinSummaryStats] = useState<
+    ProteinStats | null | undefined
+  >();
 
   const [domainsLoadingState, setDomainsLoadingState] = useState<LoadingState>(
     LoadingState.LOADING

src/ensembl/src/shared/components/help-article/VideoArticle.tsx

@@ -18,7 +18,7 @@ import React, { useState, useEffect, useRef } from 'react';
 
 import useResizeObserver from 'src/shared/hooks/useResizeObserver';
 
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import { LoadingState } from 'src/shared/types/loading-state';
 import { VideoArticleData } from 'src/shared/types/help-and-docs/article';

src/ensembl/src/shared/components/help-popup/HelpPopupBody.tsx

@@ -27,7 +27,7 @@ import {
   VideoArticle,
   RelatedArticles
 } from 'src/shared/components/help-article';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import { ReactComponent as BackIcon } from 'static/img/browser/navigate-left.svg';
 import { ReactComponent as ForwardIcon } from 'static/img/browser/navigate-right.svg';
@@ -40,9 +40,8 @@ import styles from './HelpPopupBody.scss';
 type Props = SlugReference;
 
 const HelpPopupBody = (props: Props) => {
-  const [currentReference, setCurrentReference] = useState<SlugReference>(
-    props
-  );
+  const [currentReference, setCurrentReference] =
+    useState<SlugReference>(props);
   const { article, loadingState } = useHelpArticle(currentReference);
   const historyRef = useRef<HelpPopupHistory | null>(null);
 

src/ensembl/src/shared/components/loader/Loader.tsx → src/ensembl/src/shared/components/loader/CircleLoader.tsx

@@ -17,14 +17,16 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import styles from './Loader.scss';
+import styles from './CircleLoader.scss';
 
 type Props = {
   className?: string;
 };
 
-export const CircleLoader = (props: Props) => {
+const CircleLoader = (props: Props) => {
   const className = classNames(styles.circleLoader, props.className);
 
   return <div className={className} />;
 };
+
+export default CircleLoader;

src/ensembl/src/shared/components/loader/SidebarLoader.scss

+@import 'src/styles/common';
+
+.sidebarLoader {
+  box-sizing: border-box;
+  display: flex;
+  margin: 12px 0 0 10px;
+  flex-direction: column;
+  height: 100%;
+
+  section {
+    margin-top: 45px;
+  }
+
+  div {
+    background-color: $light-grey;
+    border-radius: 20px;
+    height: 9px;
+    margin-bottom: 10px;
+    animation: fade-in 0.5s ease-in;
+  }
+
+  .listHeading {
+    width: 50%;
+  }
+
+  .shortItem {
+    width: 70%;
+  }
+
+  .longItem {
+    width: 85%;
+  }
+}
+
+@keyframes fade-in {
+  0%{
+    opacity: 0.1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/ensembl/src/shared/components/loader/SidebarLoader.tsx

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './SidebarLoader.scss';
+
+type Props = {
+  className?: string;
+};
+
+const SidebarLoader = (props: Props) => {
+  const className = classNames(styles.sidebarLoader, props.className);
+
+  return (
+    <div className={className}>
+      <div className={styles.listHeading}></div>
+      <section>
+        <div className={styles.shortItem}></div>
+        <div className={styles.shortItem}></div>
+        <div className={styles.shortItem}></div>
+        <div className={styles.shortItem}></div>
+      </section>
+      <section>
+        <div className={styles.shortItem}></div>
+        <div className={styles.shortItem}></div>
+      </section>
+      <section>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+        <div className={styles.longItem}></div>
+      </section>
+    </div>
+  );
+};
+
+export default SidebarLoader;

src/ensembl/src/shared/components/loader/index.ts

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as CircleLoader } from './CircleLoader';
+export { default as SidebarLoader } from './SidebarLoader';

src/ensembl/src/shared/components/loading-button/ControlledLoadingButton.tsx

@@ -18,7 +18,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { PrimaryButton } from 'src/shared/components/button/Button';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import { ReactComponent as Checkmark } from './checkmark.svg';
 import { ReactComponent as Cross } from './cross.svg';

src/ensembl/stories/shared-components/loader/Loader.stories.tsx → src/ensembl/stories/shared-components/circle-loader/CircleLoader.stories.tsx

@@ -16,12 +16,12 @@
 
 import React from 'react';
 
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
-import styles from './Loader.stories.scss';
+import styles from './CircleLoader.stories.scss';
 
 export default {
-  title: 'Components/Shared Components/Loader'
+  title: 'Components/Shared Components/CircleLoader'
 };
 
 export const FullPageLoader = () => (

src/ensembl/stories/shared-components/search-field/SearchField.stories.tsx

@@ -18,7 +18,7 @@ import React, { useState } from 'react';
 
 import SearchField from 'src/shared/components/search-field/SearchField';
 import QuestionButton from 'src/shared/components/question-button/QuestionButton';
-import { CircleLoader } from 'src/shared/components/loader/Loader';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import styles from './SearchField.stories.scss';