add loading state to results analytics

components/results/ResultsAnalytics.tsx

@@ -5,6 +5,7 @@ import {
   useSubmissionSessions,
 } from "../../lib/submissionSessions";
 import { timeSince } from "../../lib/utils";
+import Loading from "../Loading";
 import AnalyticsCard from "./AnalyticsCard";
 
 export default function ResultsAnalytics({ formId }) {
@@ -42,24 +43,27 @@ export default function ResultsAnalytics({ formId }) {
       ];
     }
   }, [analytics]);
+
+  if (!stats || !analytics) {
+    return <Loading />;
+  }
+
   return (
     <>
       <h2 className="mt-8 text-xl font-bold text-ui-gray-dark">Analytics</h2>
       <div>
-        {stats ? (
-          <dl className="grid grid-cols-1 gap-5 mt-8 sm:grid-cols-2 lg:grid-cols-3">
-            {stats.map((item) => (
-              <AnalyticsCard
-                key={item.id}
-                value={item.stat}
-                label={item.name}
-                toolTipText={item.toolTipText}
-                trend={item.trend}
-                smallerText={item.smallerText}
-              />
-            ))}
-          </dl>
-        ) : null}
+        <dl className="grid grid-cols-1 gap-5 mt-8 sm:grid-cols-2 lg:grid-cols-3">
+          {stats.map((item) => (
+            <AnalyticsCard
+              key={item.id}
+              value={item.stat}
+              label={item.name}
+              toolTipText={item.toolTipText}
+              trend={item.trend}
+              smallerText={item.smallerText}
+            />
+          ))}
+        </dl>
       </div>
       <div className="flex items-end">
         <h2 className="mt-16 text-xl font-bold text-ui-gray-dark">