Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dcc.Loading spinner style #2860

Merged
merged 6 commits into from
May 15, 2024
Merged

Fix dcc.Loading spinner style #2860

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8998a33
Fix dcc.Loading spinner style
AnnMarieW May 14, 2024
6659085
Merge branch 'dev' into fix-dcc-loading-style
T4rk1n May 14, 2024
ba27733
fix tests
AnnMarieW May 15, 2024
bfe5b6a
update changelog
AnnMarieW May 15, 2024
eef2673
rerun tests
AnnMarieW May 15, 2024
42b3305
rerun tests
AnnMarieW May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions components/dash-core-components/src/components/Loading.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
import CircleSpinner from '../fragments/Loading/spinners/CircleSpinner.jsx';
import DotSpinner from '../fragments/Loading/spinners/DotSpinner.jsx';
import {mergeRight} from 'ramda';

const spinnerComponentOptions = {
graph: GraphSpinner,
Expand Down Expand Up @@ -49,10 +48,6 @@ const Loading = ({
justifyContent: 'center',
alignItems: 'center',
};
const hiddenContainer = mergeRight(
{visibility: 'hidden', position: 'relative'},
overlay_style
);

/* Overrides default Loading behavior if target_components is set. By default,
* Loading fires when any recursive child enters loading state. This makes loading
Expand Down Expand Up @@ -135,11 +130,17 @@ const Loading = ({
className={parent_className}
style={
showSpinner
? mergeRight(hiddenContainer, parent_style)
? {position: 'relative', ...parent_style}
: parent_style
}
>
{children}
<div
style={
showSpinner ? {visibility: 'hidden', ...overlay_style} : {}
}
>
{children}
</div>
<div style={showSpinner ? coveringSpinner : {}}>
{showSpinner &&
(custom_spinner || (
Expand Down