Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Renderer regression #496

Merged
merged 13 commits into from
Mar 25, 2019
Merged

Renderer regression #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
74816f1
rework
Mar 21, 2019
0731919
test against regression branches
Mar 21, 2019
49f452f
lint
Mar 21, 2019
efba7e1
add loading component tests
Mar 22, 2019
5ed7feb
update jest snapshot
Mar 22, 2019
e0f47a6
with lock instead of acquire/release
Mar 22, 2019
34fba2d
lint
Mar 22, 2019
eb7cf87
extra wait
Mar 22, 2019
8e71777
update loading component tests
Mar 22, 2019
40073d2
test loading state on initial & user action
Mar 23, 2019
b7b969c
Merge branch 'master' into renderer-regression
Marc-Andre-Rivet Mar 23, 2019
f6e99ad
Update loading component flag name
Mar 25, 2019
2093e1c
revert renderer's regression branch (been merged)
Marc-Andre-Rivet Mar 25, 2019
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
27 changes: 4 additions & 23 deletions src/components/Loading.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ export default class Loading extends Component {
type,
} = this.props;

const isLoading = getLoadingState(this);

if (isLoading) {
if (loading_state && loading_state.is_loading) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The nested loading state is already determined by the renderer. Only need to check the prop value

const Spinner = getSpinner(type);
return (
<Spinner
Expand All @@ -52,6 +50,7 @@ export default class Loading extends Component {
/>
);
}

if (
R.type(this.props.children) !== 'Object' ||
R.type(this.props.children) !== 'Function'
Expand All @@ -62,6 +61,8 @@ export default class Loading extends Component {
}
}

Loading._dashprivate_isLoadingComponent = true;

Loading.defaultProps = {
type: 'default',
color: '#119DFF',
Expand Down Expand Up @@ -126,23 +127,3 @@ Loading.propTypes = {
component_name: PropTypes.string,
}),
};

function getLoadingState(element) {
if (
element.props &&
element.props.loading_state &&
element.props.loading_state.is_loading
) {
return true;
}

const children = element.props && element.props.children;
if (!children) {
return false;
}

return R.any(
child => child.type !== Loading && getLoadingState(child),
Array.isArray(children) ? children : [children]
);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is resolved by the renderer, no longer needed

6 changes: 3 additions & 3 deletions src/fragments/Loading/spinners/CircleSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const CircleSpinner = ({
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-sk-circle">
<div className="dash-spinner dash-sk-circle">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra class on the spinners, easier to target general spinner through css (and to automate tests)

<div className="dash-sk-circle1 dash-sk-child" />
<div className="dash-sk-circle2 dash-sk-child" />
<div className="dash-sk-circle3 dash-sk-child" />
Expand Down Expand Up @@ -160,7 +160,7 @@ const CircleSpinner = ({
.dash-spinner-container .sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }

@-webkit-keyframes dash-sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
Expand All @@ -170,7 +170,7 @@ const CircleSpinner = ({
transform: scale(1);
}
}

@keyframes dash-sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
Expand Down
20 changes: 10 additions & 10 deletions src/fragments/Loading/spinners/CubeSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-cube-container">
<div className="dash-spinner dash-cube-container">
<div className="dash-cube">
<div className="dash-cube-side dash-cube-side--front" />
<div className="dash-cube-side dash-cube-side--back" />
Expand Down Expand Up @@ -61,16 +61,16 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
width: 80px;
margin: 7rem auto;
}

.dash-cube-side {
width: 100%;
height: 100%;
position: absolute;
display: inline-block;
}

.dash-cube-side--front {
background-color: ${color};
background-color: ${color};
animation: blowout-front 4s infinite;
transform: rotateY(0deg) translateZ(40px);
}
Expand All @@ -79,31 +79,31 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
transform: rotateX(180deg) translateZ(40px);
animation: blowout-back 4s infinite;
}

.dash-cube-side--left {
background-color: ${changeColor(color).darken(0.2)};
transform: rotateY(-90deg) translateZ(40px);
animation: blowout-left 4s infinite;
}

.dash-cube-side--right {
background-color: ${changeColor(color).darken(0.4)};
transform: rotateY(90deg) translateZ(40px);
animation: blowout-right 4s infinite;
}

.dash-cube-side--top {
background-color: ${changeColor(color).darken(0.2)};
transform: rotateX(90deg) translateZ(40px);
animation: blowout-top 4s infinite;
}

.dash-cube-side--bottom {
background-color: ${changeColor(color).darken(0.4)};
transform: rotateX(-90deg) translateZ(40px);
animation: blowout-bottom 4s infinite;
}

@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
Expand All @@ -115,7 +115,7 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
transform: rotateX(360deg) rotateY(360deg);
}
}

@keyframes blowout-bottom {
20% {
transform: rotateX(-90deg) translateZ(40px);
Expand Down
24 changes: 12 additions & 12 deletions src/fragments/Loading/spinners/DefaultSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const DefaultSpinner = ({
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-default-spinner">
<div className="dash-spinner dash-default-spinner">
<div className="dash-default-spinner-rect1" />
<div className="dash-default-spinner-rect2" />
<div className="dash-default-spinner-rect3" />
Expand Down Expand Up @@ -59,48 +59,48 @@ const DefaultSpinner = ({
text-align: center;
font-size: 10px;
}

.dash-default-spinner > div {
background-color: ${color};
height: 100%;
width: 6px;
display: inline-block;
margin-right: 4px;

-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.dash-default-spinner .dash-default-spinner-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.dash-default-spinner .dash-default-spinner-rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.dash-default-spinner .dash-default-spinner-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.dash-default-spinner .dash-default-spinner-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
0%, 40%, 100% {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
Expand Down
18 changes: 9 additions & 9 deletions src/fragments/Loading/spinners/DotSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const DotSpinner = ({status, color, fullscreen, debug, className, style}) => {
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-dot-spinner">
<div className="dash-spinner dash-dot-spinner">
<div className="dash-dot-spinner-bounce1"></div>
<div className="dash-dot-spinner-bounce2"></div>
<div className="dash-dot-spinner-bounce3"></div>
Expand All @@ -48,38 +48,38 @@ const DotSpinner = ({status, color, fullscreen, debug, className, style}) => {
width: 70px;
text-align: center;
}

.dash-dot-spinner > div {
width: 18px;
height: 18px;
background-color: ${color};

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.dash-dot-spinner .dash-dot-spinner-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.dash-dot-spinner .dash-dot-spinner-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
Expand Down
14 changes: 7 additions & 7 deletions src/fragments/Loading/spinners/GraphSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@ const GraphSpinner = ({status, fullscreen, debug, className, style}) => {
<div style={style ? style : {}} className={spinnerClass}>
<div>
{debugTitle}
<div className="dash-spinner">
<div className="dash-spinner__bottom">
<div className="dash-spinner dash-graph-spinner">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dash-spinner and variants become dash-graph-spinner

<div className="dash-graph-spinner__bottom">
<div className="dash-bar dash-bar__one" />
<div className="dash-bar dash-bar__two" />
<div className="dash-bar dash-bar__three" />
</div>
<div className="dash-spinner__background">
<div className="dash-graph-spinner__background">
<div className="dash-dot dash-dot__one" />
<div className="dash-dot dash-dot__two" />
<div className="dash-dot dash-dot__three" />
<div className="dash-dot dash-dot__four" />
<div className="dash-spinner__bottom">
<div className="dash-graph-spinner__bottom">
<div className="dash-vert dash-vert__one" />
<div className="dash-vert dash-vert__two" />
<div className="dash-vert dash-vert__three" />
Expand All @@ -56,7 +56,7 @@ const GraphSpinner = ({status, fullscreen, debug, className, style}) => {
.dash-loading-title {
text-align: center;
}
.dash-spinner {
.dash-graph-spinner {
display: flex;
margin: 0 auto;
width: 200px;
Expand All @@ -65,14 +65,14 @@ const GraphSpinner = ({status, fullscreen, debug, className, style}) => {
z-index: -2;
border-radius: 4px;
}
.dash-spinner__bottom {
.dash-graph-spinner__bottom {
display: flex;
margin-top: auto;
flex-direction: column;
height: 12px;
width: 100%;
}
.dash-spinner__background {
.dash-graph-spinner__background {
width: 100%;
height: 100%;
display: block;
Expand Down
Loading