Fix pdf.js rendering pages in the wrong order

There was an implicit assumption that the pages returned from the
Promise of `pdf.getPage(num)` would return in order, but no such
guarantee exists. To handle this, we explicitly set which array index
based on the page number and then trigger a Vue update via `splice`.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/64467

1 files changed, 7 insertions, 1 deletions

diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 6d39abd4a1f..a0142df0806 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -40,6 +40,8 @@ export default {
         .then(() => this.$emit('pdflabload'))
         .catch(error => this.$emit('pdflaberror', error))
         .then(() => {
+          // Trigger a Vue update: https://vuejs.org/v2/guide/list.html#Caveats
+          this.pages.splice(this.pages.length);
           this.loading = false;
         });
     },
@@ -47,7 +49,11 @@ export default {
       const pagePromises = [];
       this.loading = true;
       for (let num = 1; num <= pdf.numPages; num += 1) {
-        pagePromises.push(pdf.getPage(num).then(p => this.pages.push(p)));
+        pagePromises.push(
+          pdf.getPage(num).then(p => {
+            this.pages[p.pageIndex] = p;
+          }),
+        );
       }
       return Promise.all(pagePromises);
     },