fix: 🐛 Prevent re-rendering of Chatbox due to possible context or state in SubscriptionModal (#697)

## Why?

Prevent re-rendering of Chatbox due to DOM manipulation post mounting

## How?

- Make container
- Move react query into container
- Use container as wrapper to component
- Use reference to render only once

## Tickets?

-
[PLAT-2901](https://linear.app/fleekxyz/issue/PLAT-2901/agents-ui-chatbox-renders-and-mounts-twice-causing-a-flashing-effect)

## Contribution checklist?

- [x] The commit messages are detailed
- [x] The `build` command runs locally
- [ ] Assets or static content are linked and stored in the project
- [ ] Document filename is named after the slug
- [ ] You've reviewed spelling using a grammar checker
- [ ] For documentation, guides or references, you've tested the
commands and steps
- [ ] You've done enough research before writing

## Security checklist?

- [ ] Sensitive data has been identified and is being protected properly
- [ ] Injection has been prevented (parameterized queries, no eval or
system calls)
- [ ] The Components are escaping output (to prevent XSS)

## References?

Optionally, provide references such as links

## Preview?



https://github.com/user-attachments/assets/cf30e6a0-5be7-4dc7-91e4-511c30ee0ef3

Author: punkbit

src/components/ChatToAIAgentDeploy/index.tsx

@@ -13,6 +13,7 @@ import { createPortal } from 'react-dom';
 import { isClient } from '@utils/common';
 import toast from 'react-hot-toast';
 import { ZodError } from 'zod';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
@@ -22,7 +23,9 @@ setDefined({
     .PUBLIC_PERSONA_GENERATOR_API_URL,
 });
 
-export const ChatToAIAgentDeploy = ({
+const queryClient = new QueryClient();
+
+export const ChatToAIAgentDeployChild = ({
   role,
   onDescriptionChange,
 }: {
@@ -51,6 +54,7 @@ export const ChatToAIAgentDeploy = ({
 
   const hasRun = useRef(false);
   const pendingPrompt = useRef<string>();
+
   useEffect(() => {
     if (isLoggedIn && !hasRun.current && pendingPrompt.current) {
       hasRun.current = true;
@@ -96,6 +100,23 @@ export const ChatToAIAgentDeploy = ({
     console.error('[debug] Submission failed:', error);
   };
 
+  const portalRef = useRef<React.ReactPortal>();
+
+  useEffect(() => {
+    if (isClient && !portalRef.current) {
+      // Be careful with createPortal
+      // causes unwanted re-render
+      // due to SubscriptionModal context or store triggers
+      // Here we use a reference to prevent subsequent render
+      portalRef.current = createPortal(
+        <div className="agents-ui">
+          <SubscriptionModal />
+        </div>,
+        document.body,
+      );
+    }
+  }, []);
+
   return (
     <div className="agents-ui my-20 flex justify-center text-14">
       <ChatBox
@@ -110,13 +131,22 @@ export const ChatToAIAgentDeploy = ({
         isSubmitting={isDeploying}
       />
 
-      {isClient &&
-        createPortal(
-          <div className="agents-ui">
-            <SubscriptionModal />
-          </div>,
-          document.body,
-        )}
+      {portalRef.current}
     </div>
   );
 };
+
+export const ChatToAIAgentDeploy = ({
+  role,
+  onDescriptionChange,
+}: {
+  role?: string;
+  onDescriptionChange?: () => void;
+}) => (
+  <QueryClientProvider client={queryClient}>
+    <ChatToAIAgentDeployChild
+      role={role}
+      onDescriptionChange={onDescriptionChange}
+    />
+  </QueryClientProvider>
+);

src/components/LandingPage/Hero.tsx

@@ -12,13 +12,10 @@ import {
   IoHeadsetOutline,
   IoPawOutline,
 } from 'react-icons/io5';
-import { ChatToAIAgentDeploy } from '@components/ChatToAIAgentDeploy';
 import type { IconType } from 'react-icons/lib';
 import { cn } from '@utils/cn';
+import { ChatToAIAgentDeploy } from '@components/ChatToAIAgentDeploy';
 import { useState } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-const queryClient = new QueryClient();
 
 const calculateDelay = (factor: number) => 0.25 * factor;
 
@@ -101,12 +98,10 @@ export const Hero = () => {
               </div>
             </div>
             <BlurFade delay={calculateDelay(3)}>
-              <QueryClientProvider client={queryClient}>
-                <ChatToAIAgentDeploy
-                  role={role}
-                  onDescriptionChange={() => setRole(undefined)}
-                />
-              </QueryClientProvider>
+              <ChatToAIAgentDeploy
+                role={role}
+                onDescriptionChange={() => setRole(undefined)}
+              />
             </BlurFade>
           </div>
           <BlurFade delay={calculateDelay(4)}>