Render loading states with skeleton text, not spinners

kumar303 commented 5 years ago

We currently use spinners to render loading states. These are problematic because the page flickers when it loads quickly and looks jumpy when it loads less quickly.

Let's switch to skeleton text for loading states. This approach would render a full layout as much as possible, using placeholders for any text that has not yet loaded.

It will address the flicker problem since the layout will be close to final. Transitioning to a fully loaded layout should trigger only a minimal re-rendering.
It should mostly address the jumpiness problem because each component will be fully laid out. There will still be some jumpiness for things like file content when the final content only includes one or two lines of code (it will jump from many lines to a few).
It will provide an illusion of speed. When you click on something, it will render immediately before the data has loaded.
We used this technique on addons-frontend and it worked well

Some considerations:

It's important to render a skeleton screen as close to the final screen as possible. This means everything: line-height, margins, headers. Any deviation creates jumpiness.
On addons-frontend we used an inline-block with a background color as the skeleton text. Because a div is not text, this sometimes caused a major difference in layout.
The width of skeleton text needs to be realistic for what the final text will look like.

┆Issue is synchronized with this Jira Task

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. If you think this bug should stay open, please comment on the issue with further details. Thank you for your contributions.

kumar303 commented 4 years ago

I played around with this but it needs work. The idea is to save an imprint of the current file and use that as a skeleton when transitioning to the next file. For the very first file load, it has to generate a random skeleton.

The spacing of the imprint lines doesn't match the code view exactly so it would be nice to fix that.

Screencast (with simulated slowness)

![2019-12-03 22 20 38](https://user-images.githubusercontent.com/55398/70112550-4e314000-161b-11ea-8c43-227082cbdeb8.gif)

This was an older patch but I just got it working again on top of cb35fdfbca9619236e2f988178c17826750dce36 :

Patch

```diff diff --git a/src/components/CodeLineShapes/index.tsx b/src/components/CodeLineShapes/index.tsx index 7f0d1c6..933fa9a 100644 --- a/src/components/CodeLineShapes/index.tsx +++ b/src/components/CodeLineShapes/index.tsx @@ -1,23 +1,33 @@ import * as React from 'react'; +import makeClassName from 'classnames'; +import { AnyReactNode } from '../../typeUtils'; import { LineShapes, Token } from './utils'; import styles from './styles.module.scss'; export type PublicProps = { + className?: string; + codeClassName?: string; + codeChild?: AnyReactNode; lineShapes: LineShapes; }; type Props = PublicProps; -const CodeLineShapes = ({ lineShapes }: Props) => { +const CodeLineShapes = ({ + className, + codeChild, + codeClassName, + lineShapes, +}: Props) => { return ( <> {lineShapes.tokens.map((shape, shapeIndex) => { - let className; + let internalClassName; if (shape.token === Token.whitespace) { - className = styles.whitespace; + internalClassName = styles.whitespace; } else { - className = styles.code; + internalClassName = makeClassName(styles.code, codeClassName); } return ( @@ -28,9 +38,11 @@ const CodeLineShapes = ({ lineShapes }: Props) => { String(shape.percentOfWidth), className, ].join(':')} - className={className} + className={makeClassName(internalClassName, className)} style={{ width: `${shape.percentOfWidth}%` }} - /> + > + {shape.token === Token.code && codeChild ? codeChild : null} +

); })} diff --git a/src/components/CodeSkeleton/index.tsx b/src/components/CodeSkeleton/index.tsx new file mode 100644 index 0000000..f02ede6 --- /dev/null +++ b/src/components/CodeSkeleton/index.tsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { ApplicationState } from '../../reducers'; +import { ConnectedReduxProps } from '../../configureStore'; +import { getLines } from '../CodeView/utils'; +import CodeLineShapes from '../CodeLineShapes'; +import { generateLineShapes } from '../CodeLineShapes/utils'; +import Skeleton from '../Skeleton'; + +import styles from './styles.module.scss'; + +type PublicProps = {}; + +type PropsFromState = { + content: string | null; +}; + +type Props = PublicProps & PropsFromState & ConnectedReduxProps; + +export class CodeSkeletonBase extends React.Component { + generateFakeCode() { + const allLines = []; + for (let line = 1; line <= 200; line++) { + const line = []; + + const indents = [ + '', + ' '.repeat(2), + ' '.repeat(4), + ' '.repeat(6), + ' '.repeat(8), + ' '.repeat(10), + ' '.repeat(12), + ]; + line.push(indents[Math.floor(Math.random() * indents.length)]); + + if (Math.round(Math.random() * 1.0) == 1) { + line.push('Z'); + } else { + const wordCount = Math.random() * 10; + for (let word = 1; word <= wordCount; word++) { + line.push('Z'.repeat(Math.random() * 12)); + line.push(' '); + } + } + + allLines.push(line); + } + return allLines.join('\n'); + } + + render() { + const { content } = this.props; + + const skeletonContent = content || this.generateFakeCode(); + + const lines = getLines(skeletonContent); + const allLineShapes = generateLineShapes(lines, { + maxLineLength: 80, + }); + + return ( +

+ {allLineShapes.map((lineShapes, index) => { + return ( + +

{index + 1}

+

+ + +

+ } + lineShapes={lineShapes} + /> +

+ + ); + })} +

mozilla / addons-code-manager

Render loading states with skeleton text, not spinners #379