[ADD] loading-state, [HANDLE] imports

apps/web/app/environments/[environmentId]/surveys/SurveyList.tsx

@@ -31,6 +31,12 @@ import TemplateList from "./templates/TemplateList";
 import type { TProduct } from "@formbricks/types/v1/product";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
 import type { TSurveyWithResponseCount } from "@formbricks/types/v1/surveys";
+import {
+  createSurveyAction,
+  deleteSurveyAction,
+  duplicateSurveyAction,
+  copyToOtherEnvironmentAction,
+} from "@/app/environments/[environmentId]/actions";
 
 interface SurveyListProps {
   environmentId: string;
@@ -38,10 +44,6 @@ interface SurveyListProps {
   environment: TEnvironment;
   otherEnvironment: TEnvironment;
   surveys: TSurveyWithResponseCount[];
-  createSurveyAction: any;
-  deleteSurveyAction: any;
-  duplicateSurveyAction:any;
-  copyToOtherEnvironmentAction:any;
 }
 
 export default function SurveysList({
@@ -49,14 +51,11 @@ export default function SurveysList({
   product,
   environment,
   surveys,
-  createSurveyAction,
   otherEnvironment,
-  deleteSurveyAction,
-  duplicateSurveyAction,
-  copyToOtherEnvironmentAction
 }: SurveyListProps) {
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isCreateSurveyLoading, setIsCreateSurveyLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
   const router = useRouter();
   const [activeSurvey, setActiveSurvey] = useState("" as any);
   const [_, setActiveSurveyIdx] = useState("" as any);
@@ -71,6 +70,7 @@ export default function SurveysList({
       ...template.preset,
       type: environment?.widgetSetupCompleted ? "web" : "link",
     };
+    setLoading(true);
     try {
       const survey = await createSurveyAction(environmentId, augmentedTemplate);
       router.push(`/environments/${environmentId}/surveys/${survey.id}/edit`);
@@ -78,9 +78,11 @@ export default function SurveysList({
       toast.error("An error occured creating a new survey");
       setIsCreateSurveyLoading(false);
     }
+    setLoading(false);
   };
 
   const handleDeleteSurvey = async (survey) => {
+    setLoading(true);
     try {
       await deleteSurveyAction(survey.id);
       router.refresh();
@@ -89,9 +91,11 @@ export default function SurveysList({
     } catch (error) {
       console.error(error);
     }
+    setLoading(false);
   };
 
   const duplicateSurveyAndRefresh = async (surveyId) => {
+    setLoading(true);
     try {
       await duplicateSurveyAction(environmentId, surveyId);
       router.refresh();
@@ -99,21 +103,24 @@ export default function SurveysList({
     } catch (error) {
       toast.error("Failed to duplicate the survey.");
     }
+    setLoading(false);
   };
 
   const copyToOtherEnvironment = async (surveyId) => {
+    setLoading(true);
     try {
-      await copyToOtherEnvironmentAction(environmentId, surveyId, otherEnvironment.id)
+      await copyToOtherEnvironmentAction(environmentId, surveyId, otherEnvironment.id);
       if (otherEnvironment.type === "production") {
         toast.success("Survey copied to production env.");
       } else if (otherEnvironment.type === "development") {
         toast.success("Survey copied to development env.");
       }
-      router.replace(`/environments/${otherEnvironment.id}`)
+      router.replace(`/environments/${otherEnvironment.id}`);
     } catch (error) {
-      console.log(error)
+      console.log(error);
       toast.error(`Failed to copy to ${otherEnvironment.type}`);
     }
+    setLoading(false);
   };
 
   if (typeof window == undefined || surveys.length === 0) {
@@ -142,6 +149,10 @@ export default function SurveysList({
     );
   }
 
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <>
       <ul className="grid grid-cols-2 place-content-stretch gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 ">

apps/web/app/environments/[environmentId]/surveys/page.tsx

@@ -4,7 +4,6 @@ import SurveysList from "./SurveyList";
 import { getProductByEnvironmentId, getProductWithEnvironments } from "@formbricks/lib/services/product";
 import { getEnvironment } from "@formbricks/lib/services/environment";
 import { getSurveysWithResponseCount } from "@formbricks/lib/services/survey";
-import { createSurveyAction, deleteSurveyAction, duplicateSurveyAction, copyToOtherEnvironmentAction } from "@/app/environments/[environmentId]/actions";
 
 export default async function SurveysPage({ params }) {
   const environmentId = params.environmentId;
@@ -20,10 +19,6 @@ export default async function SurveysPage({ params }) {
         product={product}
         environment={environment}
         surveys={surveys}
-        createSurveyAction={createSurveyAction}
-        deleteSurveyAction={deleteSurveyAction}
-        duplicateSurveyAction={duplicateSurveyAction}
-        copyToOtherEnvironmentAction={copyToOtherEnvironmentAction}
         otherEnvironment={productWithEnvironments.environments.find((e) => e.type !== environment.type)}
       />
       <WidgetStatusIndicator environmentId={params.environmentId} type="mini" />