fix: survey list spacing and loading (#4003)

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

@@ -71,41 +71,40 @@ export const SurveyCard = ({
   }, [survey.status, survey.id, environment.id]);
 
   return (
-    <Link
-      href={linkHref}
-      key={survey.id}
-      className="relative grid w-full grid-cols-8 place-items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition-all ease-in-out hover:scale-[101%]">
-      <div className="col-span-1 flex max-w-full items-center justify-self-start text-sm font-medium text-slate-900">
-        <div className="w-full truncate">{survey.name}</div>
-      </div>
-      <div
-        className={cn(
-          "col-span-1 flex w-fit items-center gap-2 whitespace-nowrap rounded-full py-1 pl-1 pr-2 text-sm text-slate-800",
-          surveyStatusLabel === "Scheduled" && "bg-slate-200",
-          surveyStatusLabel === "In Progress" && "bg-emerald-50",
-          surveyStatusLabel === "Completed" && "bg-slate-200",
-          surveyStatusLabel === "Draft" && "bg-slate-100",
-          surveyStatusLabel === "Paused" && "bg-slate-100"
-        )}>
-        <SurveyStatusIndicator status={survey.status} /> {surveyStatusLabel}{" "}
-      </div>
-      <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
-        {survey.responseCount}
-      </div>
-      <div className="col-span-1 flex justify-between">
-        <SurveyTypeIndicator type={survey.type} />
-      </div>
+    <Link href={linkHref} key={survey.id} className="relative block">
+      <div className="grid w-full grid-cols-8 place-items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 pr-8 shadow-sm transition-colors ease-in-out hover:border-slate-400">
+        <div className="col-span-2 flex max-w-full items-center justify-self-start text-sm font-medium text-slate-900">
+          <div className="w-full truncate">{survey.name}</div>
+        </div>
+        <div
+          className={cn(
+            "col-span-1 flex w-fit items-center gap-2 whitespace-nowrap rounded-full py-1 pl-1 pr-2 text-sm text-slate-800",
+            surveyStatusLabel === "Scheduled" && "bg-slate-200",
+            surveyStatusLabel === "In Progress" && "bg-emerald-50",
+            surveyStatusLabel === "Completed" && "bg-slate-200",
+            surveyStatusLabel === "Draft" && "bg-slate-100",
+            surveyStatusLabel === "Paused" && "bg-slate-100"
+          )}>
+          <SurveyStatusIndicator status={survey.status} /> {surveyStatusLabel}{" "}
+        </div>
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
+          {survey.responseCount}
+        </div>
+        <div className="col-span-1 flex justify-between">
+          <SurveyTypeIndicator type={survey.type} />
+        </div>
 
-      <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
-        {convertDateString(survey.createdAt.toString())}
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
+          {convertDateString(survey.createdAt.toString())}
+        </div>
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
+          {timeSince(survey.updatedAt.toString())}
+        </div>
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
+          {survey.creator ? survey.creator.name : "-"}
+        </div>
       </div>
-      <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
-        {timeSince(survey.updatedAt.toString())}
-      </div>
-      <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
-        {survey.creator ? survey.creator.name : "-"}
-      </div>
-      <div className="col-span-1 place-self-end">
+      <div className="absolute right-3 top-3.5">
         <SurveyDropDownMenu
           survey={survey}
           key={`surveys-${survey.id}`}

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

@@ -3,11 +3,18 @@
 import {
   copySurveyToOtherEnvironmentAction,
   deleteSurveyAction,
+  getSurveyAction,
 } from "@/app/(app)/environments/[environmentId]/surveys/actions";
-import { getSurveyAction } from "@/app/(app)/environments/[environmentId]/surveys/actions";
 import { TSurvey } from "@/app/(app)/environments/[environmentId]/surveys/types/surveys";
-import { ArrowUpFromLineIcon, CopyIcon, EyeIcon, LinkIcon, SquarePenIcon, TrashIcon } from "lucide-react";
-import { MoreVertical } from "lucide-react";
+import {
+  ArrowUpFromLineIcon,
+  CopyIcon,
+  EyeIcon,
+  LinkIcon,
+  MoreVertical,
+  SquarePenIcon,
+  TrashIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -99,7 +106,7 @@ export const SurveyDropDownMenu = ({
       onClick={(e) => e.stopPropagation()}>
       <DropdownMenu open={isDropDownOpen} onOpenChange={setIsDropDownOpen}>
         <DropdownMenuTrigger className="z-10 cursor-pointer" asChild>
-          <div className="rounded-lg border p-2 hover:bg-slate-50">
+          <div className="rounded-lg border bg-white p-2 hover:bg-slate-50">
             <span className="sr-only">Open options</span>
             <MoreVertical className="h-4 w-4" aria-hidden="true" />
           </div>

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

@@ -137,8 +137,8 @@ export const SurveysList = ({
       {surveys.length > 0 ? (
         <div>
           <div className="flex-col space-y-3">
-            <div className="mt-6 grid w-full grid-cols-8 place-items-center gap-3 px-6 text-sm text-slate-800">
-              <div className="col-span-1 place-self-start">Name</div>
+            <div className="mt-6 grid w-full grid-cols-8 place-items-center gap-3 px-6 pr-8 text-sm text-slate-800">
+              <div className="col-span-2 place-self-start">Name</div>
               <div className="col-span-1">Status</div>
               <div className="col-span-1">Responses</div>
               <div className="col-span-1">Type</div>

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

@@ -2,20 +2,21 @@
 
 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">
+    <div className="grid h-full w-full animate-pulse place-content-stretch gap-4">
       {[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">
+            className="relative flex h-16 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-4 w-32 rounded-xl bg-slate-400"></div>
+              <div className="h-4 w-20 rounded-xl bg-slate-200"></div>
+              <div className="h-4 w-20 rounded-xl bg-slate-200"></div>
+              <div className="h-4 w-20 rounded-xl bg-slate-200"></div>
+              <div className="h-4 w-20 rounded-xl bg-slate-200"></div>
+              <div className="h-4 w-20 rounded-xl bg-slate-200"></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>
         );
       })}

packages/lib/time.ts

@@ -1,5 +1,4 @@
-import { formatDistance } from "date-fns";
-import { intlFormat } from "date-fns";
+import { formatDistance, intlFormat } from "date-fns";
 
 export const convertDateString = (dateString: string) => {
   if (!dateString) {
@@ -10,7 +9,7 @@ export const convertDateString = (dateString: string) => {
     date,
     {
       year: "numeric",
-      month: "long",
+      month: "short",
       day: "numeric",
     },
     {