Adding a loading screen

The last step of this chapter is to make a loading screen for our app. This will tell the user the app is loading, should the Dropbox API be running slowly (or you have a lot of data to show!).

The theory behind this loading screen is fairly basic. We will set a loading variable to true by default that then gets set to false once the data has loaded. Based on the result of this variable, we will utilize view attributes to show, and then hide, an element with the loading text or animation in and also reveal the loaded data list.

Create a new key in the data object titled isLoading. Set this variable to true by default:

      data() {
        return {
          accessToken: 'XXXX',
          structure: [],
          byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
isLoading: true
        }
      }

Within the getFolderStructure method on your component, set the isLoading variable to false. This should happen within the promise after you have set the structure:

      getFolderStructure...