Navigating through the File Tree and Loading Folders from the URL Chapter 5this.isLoading = false;
})
.catch(error => {
console.log(error);
});
}As this method gets called when the app gets mounted and creates its own version of the
structure object, there is no need to declare the arrays in the data function. Update the data
object to just initialize the structure property as an object:
data() {
return {
accessToken: 'XXXX',
structure: {},
isLoading: true
}
}Running the app now will render the file list, which will be cleared and updated when a
new folder is clicked into. To give the user some feedback and let them know the app is
working, let's toggle the loading screen after each click.
Before we do this, however, let's fully understand where the delay comes from and where
is best to trigger the loading screen.
The click on the link is instantaneous, which triggers the navigate method on the folder
component, which in turn fires the updateStructure method on the Dropbox component.
The delay comes when the app gets to the filesListFolder function on the Dropbox
instance, inside the getFolderStructure method. As we may want to fire the
getFolderStucture method at a later date without triggering the loading screen, set the
isLoading variable to true inside the updateStructure method:
updateStructure(path) {
this.isLoading = true;
this.getFolderStructure(path);
}With the animations in place, the app fades between both the loading screen and folder
structure when navigating through folders.