mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-05 10:36:06 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

feat: adds skeleton loader (#2214)

Browse Source
This commit is contained in:
Piyush Gupta
2024-03-11 16:51:25 +05:30
committed by GitHub
parent 189cbcecd7
commit 2e83adc846
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx
View File

@@ -36,6 +36,8 @@ export default function SummaryList({ summary, environment, responseCount, surve
environment={environment}
noWidgetRequired={survey.type === "link"}
/>
) : !summary.length ? (
<EmptySpaceFiller type="summary" environment={environment} />
) : (
summary.map((questionSummary) => {
if (questionSummary.type === TSurveyQuestionType.OpenText) {

24
packages/ui/EmptySpaceFiller/index.tsx
View File

@@ -5,8 +5,10 @@ import React from "react";
import { TEnvironment } from "@formbricks/types/environment";
import { Skeleton } from "../Skeleton";
type EmptySpaceFillerProps = {
type: "table" | "response" | "event" | "linkResponse" | "tag";
type: "table" | "response" | "event" | "linkResponse" | "tag" | "summary";
environment: TEnvironment;
noWidgetRequired?: boolean;
emptyMessage?: string;
@@ -103,6 +105,26 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({
);
}
if (type === "summary") {
return (
<div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
<Skeleton className="group space-y-4 rounded-lg bg-white p-6 ">
<div className="flex items-center space-x-4">
<div className=" h-6 w-full rounded-full bg-slate-100"></div>
</div>
<div className="space-y-4">
<div className="flex gap-4">
<div className="h-6 w-24 rounded-full bg-slate-100"></div>
<div className="h-6 w-24 rounded-full bg-slate-100"></div>
</div>
<div className=" flex h-12 w-full items-center justify-center rounded-full bg-slate-50 text-sm text-slate-500 hover:bg-slate-100"></div>
<div className="h-12 w-full rounded-full bg-slate-50/50"></div>
</div>
</Skeleton>
</div>
);
}
return (
<div className="group space-y-4 rounded-lg bg-white p-6 ">
<div className="flex items-center space-x-4">