Delay prop does not work, loading prop “flashing” without delay
I am using react-loadable@5.5.0 for code-splitting on a basic web app. Whether I set the delay prop or not, the loading spinner flashes immediately on page load with no delay. I've stripped down the app to remove some of the routing logic, removed the CSS animations, tried earlier versions of the @5 release, removed the AppBar that remains rendered, the icon is still flashing immediately on page load with no delay. Here is a stripped down version of the Loadable implementation:
import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";
function SpinningIcon() {
return <Cached color="inherit" className="spinning" />;
}
const AsyncHome = Loadable({
loader: () => import("./containers/Home"),
loading: SpinningIcon,
delay: 1000
//delay at 1 second, still flashes on load
});
const AsyncLogin = Loadable({
loader: () => import("./containers/Login"),
loading: SpinningIcon
//no delay prop, still flashes
});
export default ({ childProps }) => (
<Switch>
<Route path="/" exact component={AsyncHome} props={childProps} />
<Route path="/login" exact component={AsyncLogin} props={childProps} />
</Switch>
);
I'm at a loss for how to move forward with this, has anyone encountered the same issue? Is there other info that could be helpful to figuring out the issue?
reactjs react-loadable
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
add a comment |
I am using react-loadable@5.5.0 for code-splitting on a basic web app. Whether I set the delay prop or not, the loading spinner flashes immediately on page load with no delay. I've stripped down the app to remove some of the routing logic, removed the CSS animations, tried earlier versions of the @5 release, removed the AppBar that remains rendered, the icon is still flashing immediately on page load with no delay. Here is a stripped down version of the Loadable implementation:
import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";
function SpinningIcon() {
return <Cached color="inherit" className="spinning" />;
}
const AsyncHome = Loadable({
loader: () => import("./containers/Home"),
loading: SpinningIcon,
delay: 1000
//delay at 1 second, still flashes on load
});
const AsyncLogin = Loadable({
loader: () => import("./containers/Login"),
loading: SpinningIcon
//no delay prop, still flashes
});
export default ({ childProps }) => (
<Switch>
<Route path="/" exact component={AsyncHome} props={childProps} />
<Route path="/login" exact component={AsyncLogin} props={childProps} />
</Switch>
);
I'm at a loss for how to move forward with this, has anyone encountered the same issue? Is there other info that could be helpful to figuring out the issue?
reactjs react-loadable
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. reactjs.org/blog/2018/10/23/…
– Tom Coughlin
Nov 21 '18 at 3:19
Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable.
– bcaspar
Nov 26 '18 at 17:54
add a comment |
I am using react-loadable@5.5.0 for code-splitting on a basic web app. Whether I set the delay prop or not, the loading spinner flashes immediately on page load with no delay. I've stripped down the app to remove some of the routing logic, removed the CSS animations, tried earlier versions of the @5 release, removed the AppBar that remains rendered, the icon is still flashing immediately on page load with no delay. Here is a stripped down version of the Loadable implementation:
import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";
function SpinningIcon() {
return <Cached color="inherit" className="spinning" />;
}
const AsyncHome = Loadable({
loader: () => import("./containers/Home"),
loading: SpinningIcon,
delay: 1000
//delay at 1 second, still flashes on load
});
const AsyncLogin = Loadable({
loader: () => import("./containers/Login"),
loading: SpinningIcon
//no delay prop, still flashes
});
export default ({ childProps }) => (
<Switch>
<Route path="/" exact component={AsyncHome} props={childProps} />
<Route path="/login" exact component={AsyncLogin} props={childProps} />
</Switch>
);
I'm at a loss for how to move forward with this, has anyone encountered the same issue? Is there other info that could be helpful to figuring out the issue?
reactjs react-loadable
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
I am using react-loadable@5.5.0 for code-splitting on a basic web app. Whether I set the delay prop or not, the loading spinner flashes immediately on page load with no delay. I've stripped down the app to remove some of the routing logic, removed the CSS animations, tried earlier versions of the @5 release, removed the AppBar that remains rendered, the icon is still flashing immediately on page load with no delay. Here is a stripped down version of the Loadable implementation:
import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";
function SpinningIcon() {
return <Cached color="inherit" className="spinning" />;
}
const AsyncHome = Loadable({
loader: () => import("./containers/Home"),
loading: SpinningIcon,
delay: 1000
//delay at 1 second, still flashes on load
});
const AsyncLogin = Loadable({
loader: () => import("./containers/Login"),
loading: SpinningIcon
//no delay prop, still flashes
});
export default ({ childProps }) => (
<Switch>
<Route path="/" exact component={AsyncHome} props={childProps} />
<Route path="/login" exact component={AsyncLogin} props={childProps} />
</Switch>
);
I'm at a loss for how to move forward with this, has anyone encountered the same issue? Is there other info that could be helpful to figuring out the issue?
reactjs react-loadable
reactjs react-loadable
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
asked Nov 20 '18 at 23:45
bcasparbcaspar
14
14
I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. reactjs.org/blog/2018/10/23/…
– Tom Coughlin
Nov 21 '18 at 3:19
Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable.
– bcaspar
Nov 26 '18 at 17:54
add a comment |
I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. reactjs.org/blog/2018/10/23/…
– Tom Coughlin
Nov 21 '18 at 3:19
Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable.
– bcaspar
Nov 26 '18 at 17:54
I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. reactjs.org/blog/2018/10/23/…
– Tom Coughlin
Nov 21 '18 at 3:19
I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. reactjs.org/blog/2018/10/23/…
– Tom Coughlin
Nov 21 '18 at 3:19
Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable.
– bcaspar
Nov 26 '18 at 17:54
Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable.
– bcaspar
Nov 26 '18 at 17:54
add a comment |
1 Answer
1
active
oldest
votes
You forgot the "pastDelay" props, on your loading, as stated on the docs: Avoiding Flash Of Loading Component
Your function should be something like this:
function SpinningIcon({ pastDelay }) {
if (pastDelay) {
return <Cached color='inherit' className='spinning' />
}
return null
}
Hope this helps :)
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403291%2fdelay-prop-does-not-work-loading-prop-flashing-without-delay%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You forgot the "pastDelay" props, on your loading, as stated on the docs: Avoiding Flash Of Loading Component
Your function should be something like this:
function SpinningIcon({ pastDelay }) {
if (pastDelay) {
return <Cached color='inherit' className='spinning' />
}
return null
}
Hope this helps :)
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
add a comment |
You forgot the "pastDelay" props, on your loading, as stated on the docs: Avoiding Flash Of Loading Component
Your function should be something like this:
function SpinningIcon({ pastDelay }) {
if (pastDelay) {
return <Cached color='inherit' className='spinning' />
}
return null
}
Hope this helps :)
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
add a comment |
You forgot the "pastDelay" props, on your loading, as stated on the docs: Avoiding Flash Of Loading Component
Your function should be something like this:
function SpinningIcon({ pastDelay }) {
if (pastDelay) {
return <Cached color='inherit' className='spinning' />
}
return null
}
Hope this helps :)
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
You forgot the "pastDelay" props, on your loading, as stated on the docs: Avoiding Flash Of Loading Component
Your function should be something like this:
function SpinningIcon({ pastDelay }) {
if (pastDelay) {
return <Cached color='inherit' className='spinning' />
}
return null
}
Hope this helps :)
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
answered Feb 7 at 19:05
Guilherme HolzGuilherme Holz
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403291%2fdelay-prop-does-not-work-loading-prop-flashing-without-delay%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. reactjs.org/blog/2018/10/23/…
– Tom Coughlin
Nov 21 '18 at 3:19
Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable.
– bcaspar
Nov 26 '18 at 17:54