From deea760a179381e2bef91bdd9eced56faf63d714 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 24 Oct 2024 20:02:18 -0700
Subject: [PATCH] fix: animate tweaks (#4015)

---
 .../[surveyId]/edit/components/FormStylingSettings.tsx       | 4 ++--
 .../[surveyId]/edit/components/SurveyBgSelectorTab.tsx       | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
index 180409b6da..fda9e92d60 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
@@ -107,9 +107,9 @@ export const FormStylingSettings = ({
       </Collapsible.CollapsibleTrigger>
 
       <Collapsible.CollapsibleContent className="flex flex-col" ref={parent}>
-        <hr className="py-1 text-slate-600" key={"hello"} />
+        <hr className="py-1 text-slate-600" />
 
-        <div className="flex flex-col gap-6 p-6 pt-2" key={"hjiii"}>
+        <div className="flex flex-col gap-6 p-6 pt-2">
           <div className="flex flex-col gap-2">
             <FormField
               control={form.control}
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
index 815f560f85..46e6dc2a2b 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
@@ -1,3 +1,4 @@
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useEffect, useState } from "react";
 import { TabBar } from "@formbricks/ui/components/TabBar";
 import { AnimatedSurveyBg } from "./AnimatedSurveyBg";
@@ -30,7 +31,7 @@ export const SurveyBgSelectorTab = ({
   isUnsplashConfigured,
 }: SurveyBgSelectorTabProps) => {
   const [activeTab, setActiveTab] = useState(bgType || "color");
-
+  const [parent] = useAutoAnimate();
   const [colorBackground, setColorBackground] = useState(bg);
   const [animationBackground, setAnimationBackground] = useState(bg);
   const [uploadBackground, setUploadBackground] = useState(bg);
@@ -93,7 +94,7 @@ export const SurveyBgSelectorTab = ({
         tabStyle="button"
         className="bg-slate-100"
       />
-      <div className="w-full rounded-b-lg border-x border-b border-slate-200 px-4 pb-4 pt-2">
+      <div className="w-full rounded-b-lg border-x border-b border-slate-200 px-4 pb-4 pt-2" ref={parent}>
         {renderContent()}
       </div>
     </div>