From 5cc071e5a80c6adfcfaf4dabf154444b2ea5f178 Mon Sep 17 00:00:00 2001 From: RajuGangitla Date: Mon, 9 Sep 2024 20:41:56 +0530 Subject: [PATCH] fix: Loading Skeleton for survey summary page (#3108) Co-authored-by: Johannes Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com> Co-authored-by: pandeymangg Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com> --- .../summary/components/SummaryMetadata.tsx | 44 ++++++++++++++----- .../summary/components/SummaryPage.tsx | 23 +++++++--- .../[surveyId]/(analysis)/summary/loading.tsx | 20 +++++++++ packages/ui/SkeletonLoader/index.tsx | 22 +++++----- 4 files changed, 81 insertions(+), 28 deletions(-) create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/loading.tsx diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx index 75245077a6..04d1e51f5c 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx @@ -6,20 +6,25 @@ interface SummaryMetadataProps { setShowDropOffs: React.Dispatch>; showDropOffs: boolean; surveySummary: TSurveySummary["meta"]; + isLoading: boolean; } -const StatCard = ({ label, percentage, value, tooltipText }) => ( +const StatCard = ({ label, percentage, value, tooltipText, isLoading }) => (

{label} - {typeof percentage === "number" && !isNaN(percentage) && ( + {typeof percentage === "number" && !isNaN(percentage) && !isLoading && ( {percentage}% )}

-

{value}

+ {isLoading ? ( +
+ ) : ( +

{value}

+ )}
@@ -44,7 +49,12 @@ const formatTime = (ttc) => { return formattedValue; }; -export const SummaryMetadata = ({ setShowDropOffs, showDropOffs, surveySummary }: SummaryMetadataProps) => { +export const SummaryMetadata = ({ + setShowDropOffs, + showDropOffs, + surveySummary, + isLoading, +}: SummaryMetadataProps) => { const { completedPercentage, completedResponses, @@ -64,18 +74,21 @@ export const SummaryMetadata = ({ setShowDropOffs, showDropOffs, surveySummary } percentage={null} value={displayCount === 0 ? - : displayCount} tooltipText="Number of times the survey has been viewed." + isLoading={isLoading} /> 100 ? null : Math.round(startsPercentage)} value={totalResponses === 0 ? - : totalResponses} tooltipText="Number of times the survey has been started." + isLoading={isLoading} /> 100 ? null : Math.round(completedPercentage)} value={completedResponses === 0 ? - : completedResponses} tooltipText="Number of times the survey has been completed." + isLoading={isLoading} /> @@ -86,21 +99,29 @@ export const SummaryMetadata = ({ setShowDropOffs, showDropOffs, surveySummary } className="group flex h-full w-full cursor-pointer flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 text-left shadow-sm"> Drop-Offs - {`${Math.round(dropOffPercentage)}%` !== "NaN%" && ( + {`${Math.round(dropOffPercentage)}%` !== "NaN%" && !isLoading && ( {`${Math.round(dropOffPercentage)}%`} )}
- {dropOffCount === 0 ? - : dropOffCount} - - - {showDropOffs ? ( - + {isLoading ? ( +
+ ) : dropOffCount === 0 ? ( + - ) : ( - + dropOffCount )} + {!isLoading && ( + + {showDropOffs ? ( + + ) : ( + + )} + + )}
@@ -114,6 +135,7 @@ export const SummaryMetadata = ({ setShowDropOffs, showDropOffs, surveySummary } percentage={null} value={ttcAverage === 0 ? - : `${formatTime(ttcAverage)}`} tooltipText="Average time to complete the survey." + isLoading={isLoading} /> diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx index 0e03d4d3a3..2094ea430b 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx @@ -67,6 +67,7 @@ export const SummaryPage = ({ const [responseCount, setResponseCount] = useState(null); const [surveySummary, setSurveySummary] = useState(initialSurveySummary); const [showDropOffs, setShowDropOffs] = useState(false); + const [isLoading, setIsLoading] = useState(true); const { selectedFilter, dateRange, resetState } = useResponseFilter(); @@ -104,28 +105,39 @@ export const SummaryPage = ({ }); }; - const handleInitialData = async () => { + const handleInitialData = async (isInitialLoad = false) => { + if (isInitialLoad) { + setIsLoading(true); + } + try { - const updatedResponseCountData = await getResponseCount(); - const updatedSurveySummary = await getSummary(); + const [updatedResponseCountData, updatedSurveySummary] = await Promise.all([ + getResponseCount(), + getSummary(), + ]); const responseCount = updatedResponseCountData?.data ?? 0; const surveySummary = updatedSurveySummary?.data ?? initialSurveySummary; + // Update the state with new data setResponseCount(responseCount); setSurveySummary(surveySummary); } catch (error) { console.error(error); + } finally { + if (isInitialLoad) { + setIsLoading(false); + } } }; useEffect(() => { - handleInitialData(); + handleInitialData(true); }, [JSON.stringify(filters), isSharingPage, sharingKey, surveyId]); useIntervalWhenFocused( () => { - handleInitialData(); + handleInitialData(false); }, 10000, !isShareEmbedModalOpen, @@ -148,6 +160,7 @@ export const SummaryPage = ({ surveySummary={surveySummary.meta} showDropOffs={showDropOffs} setShowDropOffs={setShowDropOffs} + isLoading={isLoading} /> {showDropOffs && }
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/loading.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/loading.tsx new file mode 100644 index 0000000000..741456590b --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/loading.tsx @@ -0,0 +1,20 @@ +import { PageContentWrapper } from "@formbricks/ui/PageContentWrapper"; +import { PageHeader } from "@formbricks/ui/PageHeader"; +import { SkeletonLoader } from "@formbricks/ui/SkeletonLoader"; + +const Loading = () => { + return ( + + +
+
+
+
+
+
+ + + ); +}; + +export default Loading; diff --git a/packages/ui/SkeletonLoader/index.tsx b/packages/ui/SkeletonLoader/index.tsx index 5903e2e3a2..9f3ba545a0 100644 --- a/packages/ui/SkeletonLoader/index.tsx +++ b/packages/ui/SkeletonLoader/index.tsx @@ -11,16 +11,14 @@ export const SkeletonLoader = ({ type }: SkeletonLoaderProps) => { className="rounded-xl border border-slate-200 bg-white shadow-sm" data-testid="skeleton-loader-summary"> -
-
-
-
-
+
+
-
-
+
+
+
@@ -31,13 +29,13 @@ export const SkeletonLoader = ({ type }: SkeletonLoaderProps) => { return (
- - + +
- - - + + +
);