feat: skeleton loading #3051 (#3057)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>

apps/web/app/(app)/environments/[environmentId]/surveys/loading.tsx

@@ -1,7 +1,27 @@
-import { LoadingSpinner } from "@formbricks/ui/LoadingSpinner";
+import { PageContentWrapper } from "@formbricks/ui/PageContentWrapper";
+import { PageHeader } from "@formbricks/ui/PageHeader";
+import { SurveyLoading } from "@formbricks/ui/SurveysList/components/SurveyLoading";
 
 const Loading = () => {
-  return <LoadingSpinner />;
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle="Surveys" />
+      <div className="flex items-center justify-between">
+        <div className="flex h-9 animate-pulse gap-2">
+          <div className="w-48 rounded-md bg-slate-300"></div>
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="w-24 rounded-md bg-slate-300"></div>
+          ))}
+        </div>
+        <div className="flex h-9 animate-pulse gap-2">
+          <div className="w-9 rounded-md bg-slate-300"></div>
+          <div className="w-9 rounded-md bg-slate-300"></div>
+          <div className="w-36 rounded-md bg-slate-300"></div>
+        </div>
+      </div>
+      <SurveyLoading />
+    </PageContentWrapper>
+  );
 };
 
 export default Loading;

packages/ui/SurveysList/components/SurveyLoading.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+export const SurveyLoading = () => {
+  return (
+    <div className="grid h-full w-full animate-pulse grid-cols-2 place-content-stretch gap-4 lg:grid-cols-3 2xl:grid-cols-5">
+      {[1, 2, 3, 4, 5].map((i) => {
+        return (
+          <div
+            key={i}
+            className="relative col-span-1 flex h-44 flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition-all ease-in-out">
+            <div className="flex w-full items-center justify-between">
+              <div className="h-4 w-24 rounded-xl bg-slate-300"></div>
+              <div className="h-8 w-8 rounded-md bg-slate-300"></div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="h-4 w-24 rounded-xl bg-slate-400"></div>
+              <div className="h-4 w-20 rounded-xl bg-slate-400"></div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

packages/ui/SurveysList/index.tsx

@@ -5,10 +5,10 @@ import { TEnvironment } from "@formbricks/types/environment";
 import { TProductConfigChannel } from "@formbricks/types/product";
 import { TSurvey, TSurveyFilters } from "@formbricks/types/surveys/types";
 import { Button } from "../Button";
-import { LoadingSpinner } from "../LoadingSpinner";
 import { getSurveysAction } from "./actions";
 import { SurveyCard } from "./components/SurveyCard";
 import { SurveyFilters } from "./components/SurveyFilters";
+import { SurveyLoading } from "./components/SurveyLoading";
 import { getFormattedFilters } from "./utils";
 
 interface SurveysListProps {
@@ -55,7 +55,7 @@ export const SurveysList = ({
       setOrientation(orientationFromLocalStorage);
     } else {
       setOrientation("grid");
-      localStorage.setItem("surveyOrientation", "list");
+      localStorage.setItem("surveyOrientation", "grid");
     }
   }, []);
 
@@ -177,11 +177,15 @@ export const SurveysList = ({
           )}
         </div>
       ) : (
-        <div className="flex h-full flex-col items-center justify-center py-12">
-          <LoadingSpinner />
-          <div className="text-sm text-slate-500">
-            {isFetching ? "Fetching surveys..." : "No surveys found"}
-          </div>
+        <div className="flex h-full w-full">
+          {isFetching ? (
+            <SurveyLoading />
+          ) : (
+            <div className="flex w-full flex-col items-center justify-center text-slate-600">
+              <span className="h-24 w-24 p-4 text-center text-5xl">🕵️</span>
+              No surveys found
+            </div>
+          )}
         </div>
       )}
     </div>