fix: use dynamic import for the json viewer

Author: yaroslav8765

adminforth/spa/src/afcl/JsonViewer.vue

@@ -10,15 +10,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { JsonViewer } from 'vue3-json-viewer'
+import { computed, defineAsyncComponent } from 'vue'
 import { useCoreStore } from '@/stores/core'
+import "vue3-json-viewer/dist/vue3-json-viewer.css";
 
 defineProps<{
   value: any
   expandDepth?: number
 }>()
 
+const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
 const coreStore = useCoreStore()
 
 const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))

adminforth/spa/src/components/ValueRenderer.vue

@@ -117,9 +117,10 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import { JsonViewer } from "vue3-json-viewer";
 import "vue3-json-viewer/dist/vue3-json-viewer.css";
+import { defineAsyncComponent } from 'vue';
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
+const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
 
 import { useCoreStore } from '@/stores/core';