From c879c074dc32c4b2236d4d3df6a00ea486609601 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 6 Feb 2023 14:29:06 +0100
Subject: [PATCH] Fix async import

---
 .../content-blocks/CmsDocumentBlock.vue       | 79 ++++++++++---------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/client/src/components/content-blocks/CmsDocumentBlock.vue b/client/src/components/content-blocks/CmsDocumentBlock.vue
index e32cfb15..af19b98f 100644
--- a/client/src/components/content-blocks/CmsDocumentBlock.vue
+++ b/client/src/components/content-blocks/CmsDocumentBlock.vue
@@ -6,52 +6,57 @@
 </template>
 
 <script>
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+  import {defineAsyncComponent} from 'vue';
 
-export default {
-  props: {
-    value: Object,
-    solution: {
-      type: Boolean,
-      default: false,
+  const DocumentIcon = defineAsyncComponent(() =>
+    import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+  );
+
+  export default {
+    props: {
+      value: Object,
+      solution: {
+        type: Boolean,
+        default: false,
+      },
     },
-  },
 
-  components: {
-    DocumentIcon,
-  },
-};
+    components: {
+      DocumentIcon,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.cms-document-block {
-  display: grid;
-  grid-template-columns: 50px 1fr 50px;
-  align-items: center;
-  margin-bottom: $large-spacing;
+  .cms-document-block {
+    display: grid;
+    grid-template-columns: 50px 1fr 50px;
+    align-items: center;
+    margin-bottom: $large-spacing;
 
-  &__icon {
-    width: 30px;
-    height: 30px;
-  }
-
-  &__link {
-    text-decoration: underline;
-  }
-
-  $parent: &;
-
-  &--solution {
-    margin-bottom: $small-spacing;
-
-    #{$parent}__link {
-      color: $color-silver-dark;
+    &__icon {
+      width: 30px;
+      height: 30px;
     }
-    #{$parent}__icon {
-      fill: $color-silver-dark;
+
+    &__link {
+      text-decoration: underline;
+    }
+
+    $parent: &;
+
+    &--solution {
+      margin-bottom: $small-spacing;
+
+      #{$parent}__link {
+        color: $color-silver-dark;
+      }
+
+      #{$parent}__icon {
+        fill: $color-silver-dark;
+      }
     }
   }
-}
 </style>