Pre-Caching Other Folders and Files for Faster Navigation Chapter 7Inside this handler, we can now loop through each of the folders and run
the getFolderStructure method for each one, using the path_lower property of each
one as the function argument:
structure: {
deep: true,
handler() {
for (let folder of this.structure.folders) {
this.getFolderStructure(folder.path_lower);
}
}
}With this simple piece of code, our app appears to speed up tenfold. Every subfolder you
navigate to loads instantly (unless you have a particularly long folder list and you navigate
to the last one very quickly). To give you an idea of the speed and timing of the caching,
add a console.log() inside your getFolderStructure method and open the browser
developer tools:
if(data) {
output = Promise.resolve(data);
} else {console.log(`API query for ${path}`);
output = this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {
console.log(`Response for ${path}`);This allows you to see all the API calls are done asynchronously too—the app isn't waiting
for the previous folder to be loaded and cached before moving on to the next one. This has
the advantage of allowing smaller folders to be cached without waiting for bigger ones to
be returned from the API.
Alternative caching method
As with everything, when making an app, there are many approaches to achieving the
same result. The downside with this method is that even if your folder contains only files,
this function will trigger—albeit with nothing to do.