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

Jump to bottom

[docs] Improve loading experience #20005

Merged
merged 5 commits into from
Mar 20, 2020
Merged

[docs] Improve loading experience #20005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
30fffcb
[docs] Improve loading experience
eps1lon Mar 5, 2020
cdf6bfd
[docs] Add fallbacks high pri actionable areas
eps1lon Mar 9, 2020
535f6be
fix: horizontal shift and short blink
eps1lon Mar 17, 2020
da31b96
Merge branch 'master' into docs/lazy-nossr
eps1lon Mar 20, 2020
161b736
remove skeletons
eps1lon Mar 20, 2020
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
10 changes: 4 additions & 6 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,6 @@ Router.onRouteChangeError = () => {

const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
function DeferredAppSearch() {
const fallback = null;

const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
Expand All @@ -68,11 +66,11 @@ function DeferredAppSearch() {
as="style"
/>
{/* Suspense isn't supported for SSR yet */}
{mounted && (
<React.Suspense fallback={fallback}>
{mounted ? (
<React.Suspense fallback={null}>
<AppSearch />
</React.Suspense>
)}
) : null}
</React.Fragment>
);
}
Expand Down Expand Up @@ -238,7 +236,7 @@ function AppFrame(props) {
<ExpandMoreIcon fontSize="small" />
</Button>
</Tooltip>
<NoSsr>
<NoSsr defer>
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
<Menu
id="language-menu"
anchorEl={languageMenu}
Expand Down
5 changes: 1 addition & 4 deletions docs/src/modules/components/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,6 @@ const styles = theme => ({
},
justifyContent: 'space-between',
},
toolbarButtons: {
margin: '2px 0',
},
code: {
display: 'none',
padding: 0,
Expand Down Expand Up @@ -373,7 +370,7 @@ function Demo(props) {
className={classes.toolbar}
role="toolbar"
>
<NoSsr>
<NoSsr defer>
<DemoLanguages
demo={demo}
codeOpen={codeOpen}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/DemoSandboxed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function DemoFrame(props) {

// NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount
return (
<NoSsr>
<NoSsr defer>
<Frame
ref={handleRef}
className={classes.frame}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/landing/QuickWord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function QuickWord() {
return (
<div className={classes.root}>
<Typography variant="caption">{t('homeQuickWord')}</Typography>
<NoSsr>
<NoSsr defer>
<Link
variant="body2"
display="block"
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/landing/Quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export default function Quotes() {

return (
<div className={classes.root}>
<NoSsr>
<NoSsr defer>
<Container maxWidth="md" className={classes.container} disableGutters>
<Divider />
<div className={classes.users}>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/landing/Sponsors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function Sponsors() {

return (
<div className={classes.root}>
<NoSsr>
<NoSsr defer>
<Container maxWidth="md">
<Divider />
<MarkdownElement className={classes.markdownElement} text={backers[userLanguage]} />
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/landing/Themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function Themes() {

return (
<div className={classes.root}>
<NoSsr>
<NoSsr defer>
<Container maxWidth="md">
<Typography variant="h4" component="h2" align="center" gutterBottom>
{t('themes')}
Expand All @@ -69,7 +69,7 @@ export default function Themes() {
data-ga-event-label="home-image"
className={classes.link}
>
<NoSsr>
<NoSsr defer>
<img
className={classes.img}
alt={t('themesButton')}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/landing/Users.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export default function Users() {

return (
<div className={classes.root}>
<NoSsr>
<NoSsr defer>
<Container maxWidth="md" className={classes.container} disableGutters>
<Divider />
<div className={classes.users}>
Expand Down