How can I add a spinner or a loader after performing annotations on pdf?

Technical Support
1

PDF.js Express Version

Detailed description of issue
Need to add a spinner/loader on loading annotations or loading pdf into the viewer. Tried using ngx spinner but it will not working inside Webviewer. Any help would be appreciated . Thanks !

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

2

Hi there,

You can use the openElements and closeElements APIs to show and hide the built in loading spinner:

    instance.openElements(['loadingModal']);

    setTimeout(() => {
      instance.closeElements(['loadingModal']);
    }, 1000)

For example, if you wanted to display the loading spinner while annotations are loading from your server, you could do something like this:

WebViewer({
    initialDoc: 'mydoc.pdf'
}, ele).then(instance => {
 
   instance.docViewer.on('documentLoaded', async () => {
       instance.openElements(['loadingModal']);
       const xfdf = await loadAnnotsFromMyServer();
       instance.annotManager.importAnnotations(xfdf);
        
       instance.docViewer.one('annotationsLoaded', () => {
           instance.closeElements(['loadingModal']);
       })
   })
})

Thanks!
Logan

3

Hey Logan,

Thanks a lot for the suggestion . It worked well for me. But is there a progress spinner also available which can be shown while the pdf is loaded into the viewer. For large pdf files viewer takes a while to load.

4

Hi,

You can use the built in progress spinner for anything you want. You can use a variety of WebViewer events to time when it should be on or off.

For events related to document loaded, take a look at the docViewer events.

Thanks,
Logan