Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Getting a List of Files Using the Dropbox API Chapter 4

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(path) {

this.dropbox().filesListFolder({

path: path,

include_media_info: true

})

.then(response => {

console.log(response.entries);

this.structure = response.entries;

this.isLoading = false;

})

.catch(error => {

console.log(error);

});

}

We can now utilize this variable in our view to show and hide a loading container.

Create a new

<h1>Dropbox</h1>

<div>Loading...</div>

<ul>

...