Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Open sidebar
ensembl-web
ensembl-client
Commits
4853a9ec
Unverified
Commit
4853a9ec
authored
Sep 16, 2021
by
Imran Salam
Committed by
GitHub
Sep 16, 2021
Browse files
Add placeholder loader for Track Panel (#577)
parent
ed8cb5cf
Pipeline
#194170
passed with stages
in 4 minutes and 29 seconds
Changes
22
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
150 additions
and
24 deletions
+150
-24
src/ensembl/src/content/app/about/About.tsx
src/ensembl/src/content/app/about/About.tsx
+1
-1
src/ensembl/src/content/app/browser/browser-image/BrowserImage.test.tsx
...c/content/app/browser/browser-image/BrowserImage.test.tsx
+1
-1
src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx
...bl/src/content/app/browser/browser-image/BrowserImage.tsx
+1
-1
src/ensembl/src/content/app/browser/track-panel/TrackPanel.test.tsx
...l/src/content/app/browser/track-panel/TrackPanel.test.tsx
+5
-1
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+5
-2
src/ensembl/src/content/app/browser/zmenu/ZmenuInstantDownload.tsx
...bl/src/content/app/browser/zmenu/ZmenuInstantDownload.tsx
+1
-1
src/ensembl/src/content/app/entity-viewer/components/example-links/ExampleLinks.tsx
...p/entity-viewer/components/example-links/ExampleLinks.tsx
+1
-1
src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx
...embl/src/content/app/entity-viewer/gene-view/GeneView.tsx
+1
-1
src/ensembl/src/content/app/entity-viewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.tsx
...ins-list/proteins-list-item-info/ProteinsListItemInfo.tsx
+4
-3
src/ensembl/src/shared/components/help-article/VideoArticle.tsx
...sembl/src/shared/components/help-article/VideoArticle.tsx
+1
-1
src/ensembl/src/shared/components/help-popup/HelpPopupBody.tsx
...nsembl/src/shared/components/help-popup/HelpPopupBody.tsx
+3
-4
src/ensembl/src/shared/components/loader/CircleLoader.scss
src/ensembl/src/shared/components/loader/CircleLoader.scss
+0
-0
src/ensembl/src/shared/components/loader/CircleLoader.tsx
src/ensembl/src/shared/components/loader/CircleLoader.tsx
+4
-2
src/ensembl/src/shared/components/loader/SidebarLoader.scss
src/ensembl/src/shared/components/loader/SidebarLoader.scss
+43
-0
src/ensembl/src/shared/components/loader/SidebarLoader.tsx
src/ensembl/src/shared/components/loader/SidebarLoader.tsx
+56
-0
src/ensembl/src/shared/components/loader/index.ts
src/ensembl/src/shared/components/loader/index.ts
+18
-0
src/ensembl/src/shared/components/loading-button/ControlledLoadingButton.tsx
...red/components/loading-button/ControlledLoadingButton.tsx
+1
-1
src/ensembl/stories/shared-components/circle-loader/CircleLoader.stories.scss
...shared-components/circle-loader/CircleLoader.stories.scss
+0
-0
src/ensembl/stories/shared-components/circle-loader/CircleLoader.stories.tsx
.../shared-components/circle-loader/CircleLoader.stories.tsx
+3
-3
src/ensembl/stories/shared-components/search-field/SearchField.stories.tsx
...es/shared-components/search-field/SearchField.stories.tsx
+1
-1
No files found.
src/ensembl/src/content/app/about/About.tsx
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
).
toBe
Fals
y
();
expect
(
container
.
querySelector
(
'
.sidebarLoader
'
)
).
toBe
Truth
y
();
});
it
(
'
renders TrackPanelList when necessary requirements are satisfied
'
,
()
=>
{
...
...
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
4853a9ec
...
...
@@ -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/s
tore
'
;
import
{
SidebarLoader
}
from
'
src/s
hared/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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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
View file @
4853a9ec
...
...
@@ -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.scss
→
src/ensembl/src/shared/components/loader/
Circle
Loader.scss
View file @
4853a9ec
File moved
src/ensembl/src/shared/components/loader/Loader.tsx
→
src/ensembl/src/shared/components/loader/
Circle
Loader.tsx
View file @
4853a9ec
...
...
@@ -17,14 +17,16 @@
import
React
from
'
react
'
;
import
classNames
from
'
classnames
'
;
import
styles
from
'
./Loader.scss
'
;
import
styles
from
'
./
Circle
Loader.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
0 → 100644
View file @
4853a9ec
@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
0 → 100644
View file @
4853a9ec
/**
* 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
0 → 100644
View file @
4853a9ec
/**
* 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
View file @
4853a9ec
...
...
@@ -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.scss
→
src/ensembl/stories/shared-components/
circle-
loader/
Circle
Loader.stories.scss
View file @
4853a9ec
File moved
src/ensembl/stories/shared-components/loader/Loader.stories.tsx
→
src/ensembl/stories/shared-components/
circle-
loader/
Circle
Loader.stories.tsx
View file @
4853a9ec
...
...
@@ -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
'
./
Circle
Loader.stories.scss
'
;
export
default
{
title
:
'
Components/Shared Components/Loader
'
title
:
'
Components/Shared Components/
Circle
Loader
'
};
export
const
FullPageLoader
=
()
=>
(
...
...
src/ensembl/stories/shared-components/search-field/SearchField.stories.tsx
View file @
4853a9ec
...
...
@@ -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
'
;
...
...
Prev
1
2
Next
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment