ui: add progress bar when switching pages #587
Conversation
|
How about the solution react-top-loading-bar suggested in #126? |
I glanced at its documents and example project - react-moviews, it seems need to change much code so I didn't try it. I can have a try today and see whether there are some other solutions. |
|
New solution by react-top-loading-bar, looks nice. |
| <div className={styles.dialogContainer}> | ||
| <div className={styles.dialog}> | ||
| <TiDBSignInForm registry={registry} /> | ||
| <Router> |
There was a problem hiding this comment.
After testing, the TopLoadingBar can't receive the single-spa:before-routing-event event if it isn't wrapped by the Router component.
| <div className={styles.dialog}> | ||
| <TiDBSignInForm registry={registry} /> | ||
| <Router> | ||
| <TopLoadingBar /> |
There was a problem hiding this comment.
How about making it another SingleSPA app that always exists on the page, or simply put it outside everything mounted by SingleSPA. In this way, it can listen SingleSPA global events gracefully without worrying about its own lifecycle.
There was a problem hiding this comment.
It may be a solution, let me have a try.
There was a problem hiding this comment.
Implement it by this way in PR #661 , much more graceful! will close this PR.
|
Implement it by PR #661 with new solution, so close this PR. |
|
Btw, this branch can be deleted. |
resolve #126
What did:
Just not sure whether this is a good way, because the NProgess is a jQuery-style lib which operates the DOM directly.
And the progress bar color is not very explicit. If we want to change that color, we need to copy the nprogress.css from node_modules and edit it.
Demo: