Files loading slowly and preloading

[danielrhodes]

When viewing many files in succession, there is often a long delay while a file loads. Network issues aside, is there any way to preload files? When looking through the source, it seems there is some mention of this, but I couldn't get anything to make a noticeable difference in loading time.

What would your recommendations be here? Would also be glad to make a PR if necessary.

[jeremypress]

Hey @danielrhodes,
If possible, I would recommend using a collection (example here). This will automatically prefetch the contents and assets of subsequent files for certain file types.

If you wanted a way to manually trigger the prefetch of a file, you would first need to grab the file info (which allows preview to determine how to access the file's content), and then use the prefetch method described in Preview.js.

this prefetchFileInfo function does not currently exist, but I'd be happy to go into more detail if collections don't work for you.

Hope this helps!

[danielrhodes]

Using collections already. Have not tried the prefetch method yet.

I'm not sure if collections has made things better as I still find lots of cases where the file takes a long time to load. My guess is that perhaps I am doing things incorrectly. In my interface, a user can click a file name from a list and then preview a file in an always visible previewer. So when a user clicks on a file, it does a show. I'm not sure what happens when the show method is fired, but would that blow the prefetch catch if the collection needs to be fed in each time?

[jeremypress]

Would it be possible to see an example of your code? If you're using the same token each time you call show with the collection, then the prefetching should still work (even though that's not super efficient). If you're using a different token each time, it will invalidate any caching that has been done.

Based on your use case I would check out the Content Explorer, which essentially does file navigation + preview. documentation and codepen example

[danielrhodes]

Sure, here is the code. The onSoftSelectDocument method gets fired every time somebody clicks on a document. The token is staying the same.

In this case, doc is a model which holds a box_document_id corresponding to the file_id of the Box document. The documents are word docs/pdfs/etc. -- no videos, very few images, some spreadsheets.

    onSoftSelectDocument(doc, loadPreview) {
      if (loadPreview == undefined) {
        loadPreview = true
      }

      // Don't do anything if selected doc is already this doc
      if (this.selectedDocument != null && this.selectedDocument.id == doc.id) {
        return;
      }

      this.selectedDocument = doc;
      var collectedFileIds =  _.map(this.documents, 'box_document_id');
      // If we have an access token, preview it
      if (window.boxAccessToken !== undefined && loadPreview === true) {
        if (this.preview == null) {
          this.preview = new Box.Preview();
          this.preview.updateCollection(collectedFileIds);
          this.preview.prefetchViewers();
        }

        this.preview.show(String(doc.box_document_id), window.boxAccessToken, {
            container: '.preview-container',
            showDownload: true,
            header: 'light',
            logoUrl: 'http://',
            collection: collectedFileIds
        });
      }
    },

[jeremypress]

Hey Daniel,
The team is discussing the best way to implement a manual prefetching solution. In the meantime, I noticed that in your implementation there are no arguments passed into prefetchViewers. The default behavior in that case is to prefetch nothing. Try passing in a list of relevant viewers, such as this.prefetchViewers(['Document', 'Presentation', 'Image']).

[danielrhodes]

@jeremypress Any updates on this?

[tonyjin]

Hey @danielrhodes we're in the middle of some tech debt/cleanup work and will get to this + related performance enhancements later on in the quarter. I'd expect some updates in a month or so.

[gblachonupg]

Hello, any update on this ?