Adds additional explanation on loading screen

Author: mvanbeusekom

frontend/projects/valtimo/shared/assets/core/en.json

@@ -1179,7 +1179,8 @@
         "modal": {
           "header": "Document preview"
         },
-        "pdfViewerNotSupported": "Your browser does not support PDF viewing."
+        "pdfViewerNotSupported": "Your browser does not support PDF viewing.",
+        "loading": "A preview version of the document is being generated. This may take a moment."
       }
     },
     "notifications": {

frontend/projects/valtimo/shared/assets/core/nl.json

@@ -1213,7 +1213,8 @@
         "modal": {
           "header": "Document weergave"
         },
-        "pdfViewerNotSupported": "Uw browser biedt geen ondersteuning voor het weergeven van PDF bestanden."
+        "pdfViewerNotSupported": "Uw browser biedt geen ondersteuning voor het weergeven van PDF bestanden.",
+        "loading": "Het document wordt geconverteerd voor weergave. Dit kan even duren."
       }
     },
     "notifications": {

frontend/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-preview-modal/documenten-api-preview-modal.component.html

@@ -43,7 +43,10 @@ <h3 class="header">
 </cds-modal>
 
 <ng-template #loading>
-  <div class="loading-container pb-2">
+  <div class="loading-container">
+    <span class="cds--inline-notification__title">
+      {{ 'zgw.documents.preview.loading' | translate }}
+    </span>
     <cds-loading size="normal"></cds-loading>
   </div>
 </ng-template>

frontend/projects/valtimo/zgw/src/lib/modules/documenten-api/components/documenten-api-preview-modal/documenten-api-preview-modal.component.scss

@@ -24,9 +24,10 @@
 }
 
 .loading-container {
-  display: flex;
   justify-content: center;
+  flex-direction: column;
   align-items: center;
   height: 88vh;
+  gap: 50px;
   width: 100%;
 }