From d98273c8599cf46d37f4978812e2d041ff5189c5 Mon Sep 17 00:00:00 2001
From: Alexander <98586297+Alexander-Kezik@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:19:13 +0100
Subject: [PATCH] fix(chat): fix settings modal opening delay (Issue #2863)
 (#2864)

---
 apps/chat/src/hooks/useTokenizer.ts | 37 +++++++++++++++++++----------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/chat/src/hooks/useTokenizer.ts b/apps/chat/src/hooks/useTokenizer.ts
index 875d9ec1e5..a7efdf5487 100644
--- a/apps/chat/src/hooks/useTokenizer.ts
+++ b/apps/chat/src/hooks/useTokenizer.ts
@@ -1,29 +1,40 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { DialAIEntityModel } from '../types/models';
 
 import { Tiktoken, get_encoding } from 'tiktoken';
 
 export const useTokenizer = (tokenizer: DialAIEntityModel['tokenizer']) => {
-  const [encoding, setEncoding] = useState<Tiktoken | undefined>(undefined);
+  const encodingRef = useRef<Tiktoken | null>(null);
 
   useEffect(() => {
-    if (tokenizer?.encoding) {
-      setEncoding(get_encoding(tokenizer.encoding));
+    // clean up if tokenizer changed
+    if (encodingRef.current) {
+      encodingRef.current.free();
+      encodingRef.current = null;
     }
+
+    // use microtask to not block the thread and isMounted variable to prevent task execution if component unmounted
+    let isMounted = true;
+    Promise.resolve().then(() => {
+      if (isMounted && tokenizer?.encoding) {
+        encodingRef.current = get_encoding(tokenizer.encoding);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+      if (encodingRef.current) {
+        encodingRef.current.free();
+        encodingRef.current = null;
+      }
+    };
   }, [tokenizer]);
 
-  useEffect(() => {
-    return () => encoding?.free();
+  const getTokensLength = useCallback((str: string) => {
+    return encodingRef.current?.encode(str).length ?? new Blob([str]).size;
   }, []);
 
-  const getTokensLength = useCallback(
-    (str: string) => {
-      return encoding?.encode(str).length ?? new Blob([str]).size;
-    },
-    [encoding],
-  );
-
   return {
     getTokensLength,
   };