Unverified Commit 4853a9ec authored by Imran Salam's avatar Imran Salam Committed by GitHub
Browse files

Add placeholder loader for Track Panel (#577)

parent ed8cb5cf
Pipeline #194170 passed with stages
in 4 minutes and 29 seconds
......@@ -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';
......
......@@ -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" />
}));
......
......@@ -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';
......
......@@ -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', () => {
......
......@@ -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) => {
......
......@@ -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';
......
......@@ -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';
......
......@@ -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';
......
......@@ -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
......
......@@ -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';
......
......@@ -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);
......
......@@ -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;
@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;
}
}
/**
* 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;
/**
* 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';
......@@ -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';
......
......@@ -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 = () => (
......
......@@ -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';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment