feat: use deferred teleport, update old comments

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Sep 6, 2024 · 6c7263a · 6c7263a
1 parent 669a347
commit 6c7263a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -36,9 +36,6 @@
 </template>
 
 <script setup lang="ts">
-/**
- * TODO: Remove j-transition classes from this file once https://github.com/vuejs/core/issues/5148 is fixed
- */
 import { shallowRef, type Component as VueComponent, onMounted } from 'vue';
 import type { RouteMeta } from 'vue-router';
 import DefaultLayout from '@/layouts/default.vue';

diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
@@ -2,7 +2,8 @@
   <template v-if="mediaElementType">
     <Teleport
       :to="videoContainerRef"
-      :disabled="!videoContainerRef">
+      :disabled="!videoContainerRef"
+      defer>
       <Component
         :is="mediaElementType"
         v-show="mediaElementType === 'video' && videoContainerRef"

diff --git a/frontend/src/components/lib/JApp.vue b/frontend/src/components/lib/JApp.vue
@@ -1,6 +1,8 @@
 <template>
-  <Teleport to="head">
-    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+  <Teleport
+    to="head"
+    defer>
+    <!-- eslint-disable @intlify/vue-i18n/no-raw-text vue/require-component-is -->
     <component
       is="style"
       data-jellyfin-css-vars>
@@ -11,7 +13,7 @@
       --j-background-color: rgb(var(--v-theme-background));
       }
     </component>
-    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+    <!-- eslint-enable @intlify/vue-i18n/no-raw-text vue/require-component-is -->
   </Teleport>
   <slot />
 </template>

diff --git a/frontend/src/components/lib/JView.vue b/frontend/src/components/lib/JView.vue
@@ -9,6 +9,9 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * TODO: Remove j-transition classes from this file once https://github.com/vuejs/core/issues/5148 is fixed
+ */
 import type { Component } from 'vue';
 
 defineProps<{