From 3a48c35279aea60b0c0b812cffa0935fe86c958c Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 6 Sep 2024 19:20:23 +0200
Subject: [PATCH] move transformers inside the function component to avoid
 circular dep problems

---
 src/components/Translation.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Translation.tsx b/src/components/Translation.tsx
index 626f26a7051..21cba5ed8af 100644
--- a/src/components/Translation.tsx
+++ b/src/components/Translation.tsx
@@ -13,12 +13,6 @@ type TranslationProps = {
   transform?: HtmrOptions["transform"]
 }
 
-// Custom components mapping to be used by `htmr` when parsing the translation
-// text
-const defaultTransform = {
-  a: TooltipLink,
-}
-
 // Renders the translation string for the given translation key `id`. It
 // fallback to English if it doesn't find the given key in the current language
 const Translation = ({ id, options, transform = {} }: TranslationProps) => {
@@ -28,6 +22,12 @@ const Translation = ({ id, options, transform = {} }: TranslationProps) => {
   const { t } = useTranslation(requiredNamespaces)
   const translatedText = t(id, options)
 
+  // Custom components mapping to be used by `htmr` when parsing the translation
+  // text
+  const defaultTransform = {
+    a: TooltipLink,
+  }
+
   // Use `htmr` to parse html content in the translation text
   return htmr(translatedText, {
     transform: { ...defaultTransform, ...transform },