Page Loading

In order to provide a great user experience, you should design and develop initial Page Loading experiences to be handled differently than updating a section of the page after the page has loaded.

Page Loading vs. Content Loading

Let's define what we actually mean when we say the words "page loading". In a browser experience there is typically a lifecycle of a page regarding rendering content: Page Loading and Content Loading.

Page Loading

Page loading refers to the initial page rendering when you first land on a web-page/route. For example, if you go to pluralsight.com and your dashboard (assuming you are logged in) for the first time, you may get a Dashboard page that has to initially load different types of information from the server in order to display the page you are supposed to be viewing.

Page Loading is when the browser fetches and displays a web page for the first time upon going to a specific route/URL.

Content Loading

After the browser has finished the Page Loading stage, there may be a button that will update some information on that page when you click it, this is known as Content Loading.

Content Loading is when the browser updates a specific section of UI within a previously loaded web page.

Now that you are more familiar with what we mean by Page Loading, let's discuss the pattern we recommend using.

Skeletons for Page Loading

In Pando, we recommend the use of Skeletons for initial Page Loading experiences.

In this example, we are creating a Fallback component for a Profile Section.

function FallbackFeature() {
  return (
    <div style={{ display: 'flex', width: '100%' }}>
      <Skeleton kind="circle" />
      <div style={{ paddingInlineStart: '1rem', width: '50%' }}>
        <Skeleton kind="text" />
        <Skeleton kind="text" style={{ width: '6rem' }} />
        <Skeleton>
          <h2 style={{ visibility: 'hidden' }}>Some Title</h2>
          <p>A description of the content.</p>
        </Skeleton>
      </div>
    </div>
  )
}

Whenever you are creating a fallback component, it is best to keep it in the same file from the component that will be rendered. This will help keep your code clean and easy to maintain. You can then combine the logic using the Show component.

Using with React.Suspense

If you use React, you can easily create a Skeleton layout of what you want to display, then use the Suspense tag to automagically manage when they will appear and dissapear.

In the example below, we are using the Avatar component which uses the Suspense tag to display a fallback component while the image is loading internally.

Circular Progress for Content Loading

Whenever you need to display a loading state within a section of a page that needs updating (i.e. has already initially loaded), use the Circular Progress.

Because this example requires more verbose code to mimic a data update, we will use a Sandbox preview: