From 439dd0b44e4f46915a6df8118163c16a17f9dc2a Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Mon, 13 Apr 2026 22:26:20 +0530
Subject: [PATCH] fix: add loading skeleton for responses page (#7700)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Johannes <johannes@formbricks.com>
---
 .../surveys/[surveyId]/(analysis)/loading.tsx | 22 +++++++++++
 .../(analysis)/responses/loading.tsx          | 23 +++++++++++
 .../ui/components/skeleton-loader/index.tsx   | 39 ++++++++++++++++++-
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/loading.tsx
 create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/loading.tsx

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/loading.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/loading.tsx
new file mode 100644
index 000000000000..0b69c660d939
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/loading.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
+
+const Loading = () => {
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle="" />
+      <div className="flex h-9 animate-pulse gap-2">
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+      </div>
+      <SkeletonLoader type="summary" />
+    </PageContentWrapper>
+  );
+};
+
+export default Loading;
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/loading.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/loading.tsx
new file mode 100644
index 000000000000..01c34867f966
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/loading.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
+
+const Loading = () => {
+  const { t } = useTranslation();
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("common.responses")} />
+      <div className="flex h-9 animate-pulse gap-1.5">
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+      </div>
+      <SkeletonLoader type="responseTable" />
+    </PageContentWrapper>
+  );
+};
+
+export default Loading;
diff --git a/apps/web/modules/ui/components/skeleton-loader/index.tsx b/apps/web/modules/ui/components/skeleton-loader/index.tsx
index 88343ed50b37..7af41bff84e8 100644
--- a/apps/web/modules/ui/components/skeleton-loader/index.tsx
+++ b/apps/web/modules/ui/components/skeleton-loader/index.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from "@/modules/ui/components/skeleton";
 
 type SkeletonLoaderProps = {
-  type: "response" | "summary";
+  type: "response" | "responseTable" | "summary";
 };
 
 export const SkeletonLoader = ({ type }: SkeletonLoaderProps) => {
@@ -25,6 +25,43 @@ export const SkeletonLoader = ({ type }: SkeletonLoaderProps) => {
     );
   }
 
+  if (type === "responseTable") {
+    const renderTableCells = () => (
+      <>
+        <Skeleton className="h-4 w-4 rounded-xl bg-slate-400" />
+        <Skeleton className="h-4 w-24 rounded-xl bg-slate-200" />
+        <Skeleton className="h-4 w-32 rounded-xl bg-slate-200" />
+        <Skeleton className="h-4 w-40 rounded-xl bg-slate-200" />
+        <Skeleton className="h-4 w-40 rounded-xl bg-slate-200" />
+        <Skeleton className="h-4 w-32 rounded-xl bg-slate-200" />
+      </>
+    );
+
+    return (
+      <div className="animate-pulse space-y-4" data-testid="skeleton-loader-response-table">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-48 rounded-md bg-slate-300" />
+          <div className="flex gap-2">
+            <Skeleton className="h-8 w-8 rounded-md bg-slate-300" />
+            <Skeleton className="h-8 w-8 rounded-md bg-slate-300" />
+          </div>
+        </div>
+        <div className="overflow-hidden rounded-xl border border-slate-200">
+          <div className="flex h-12 items-center gap-4 border-b border-slate-200 bg-slate-100 px-4">
+            {renderTableCells()}
+          </div>
+          {Array.from({ length: 10 }, (_, i) => (
+            <div
+              key={i}
+              className="flex h-12 items-center gap-4 border-b border-slate-100 px-4 last:border-b-0">
+              {renderTableCells()}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   if (type === "response") {
     return (
       <div className="group space-y-4 rounded-lg bg-white p-6" data-testid="skeleton-loader-response">