Allow VuePDF component to also handle data loading state

[mkirkeng-leukeleu]

Currently the VuePDF component emits an event (loaded) when loading is done and has a slot for showing content while loading. This "loading" only pertains to rendering the page however. I think most time is usually spent loading the actual PDF file from the server.

It is possible to track said state separately using the onProgress callback from usePDF but it would be nicer if the VuePDF component could also handle that so you just have to provide the loading text/spinner.

So for example, rather than doing this:

<script>
const dataLoading = ref(true)
const { pdf } = usePDF(props.path, {
  onProgress: (progressEvent) => {
    if (progressEvent.loaded === progressEvent.total) {
      dataLoading.value = false
    }
  },
})
</script>

<template>
    <div v-if="dataLoading">Loading...</div>
    <VuePDF v-else :pdf="pdf">
      <div>Loading...</div>
    </VuePDF>
</template>

One would be able to do this:

<script>
const { pdf } = usePDF(props.path)
</script>

<template>
    <VuePDF :pdf="pdf" includeDataLoading>
      <div>Loading...</div>
    </VuePDF>
</template>

Note: I am still new to using VuePDF so if there already is a better way to do what I want to do here: my apologies.

[TaTo30]

The issue here is that VuePDF is a page component, so that loaded event and the loading slot are for the page not for the document.

Some sort of document features could be implemented using usePDF and pdf.js but most of them are more like application's requirements than feasible features for this package.