fix: JavaScript repeats execution during hydration [SPMVP-7194]

storipress · Apr 2, 2024 · 18b3d31 · 18b3d31
1 parent b0adab3
commit 18b3d31
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/packages/karbon/src/runtime/article/components/ArticleBody.vue b/packages/karbon/src/runtime/article/components/ArticleBody.vue
@@ -28,7 +28,7 @@ import {
 // @ts-expect-error virtual file
 import { editorBlocks } from '#build/editor-blocks.mjs'
 
-const { $paywall } = useNuxtApp()
+const { $paywall, isHydrating } = useNuxtApp()
 const { loadAll: fixArticleEmbed } = useEmbed()
 
 const root = ref<HTMLElement>()
@@ -39,10 +39,12 @@ const paywallID = computed(() => `paywall-${articleID.value || crypto.randomUUID
 const articlePlan = computed(() => article?.plan || ArticlePlan.Free)
 
 const getDecryptKey = useDecryptClient<ViewableApiResult>()
-watchEffect(() => {
-  if (!root.value) return
-  processingArticles(root.value, fixArticleEmbed)
-})
+if (!isHydrating) {
+  watchEffect(() => {
+    if (!root.value) return
+    processingArticles(root.value, fixArticleEmbed)
+  })
+}
 
 const { state: articleSegments, execute } = useAsyncState<Segment[]>(async () => {
   return await decryptPaidContent(