[dashboard] Show progress bar for schema validation (#40656)

Adds a progress bar to the dashboard for showing schema validation progress.
<img width="987" height="739" alt="Screenshot 2025-09-04 at 5 17 41 PM" src="https://github.com/user-attachments/assets/8a24b558-57e5-41cf-a454-fc60620967a7" />

GitOrigin-RevId: 3e6e773f066e65a4085277866a6b468cea91ff4c

Author: emmaling27

npm-packages/@convex-dev/design-system/src/ProgressBar.tsx

@@ -47,3 +47,28 @@ export function ProgressBar({
     </div>
   );
 }
+
+export function ProgressBarWithPercent({
+  fraction,
+  variant,
+  ariaLabel,
+}: {
+  fraction: number;
+  variant: "stripes" | "solid";
+  ariaLabel: string;
+}) {
+  const percent = Math.round(fraction * 100);
+  return (
+    <div className="flex items-center gap-3">
+      <ProgressBar
+        fraction={fraction}
+        ariaLabel={ariaLabel}
+        variant={variant}
+        className="grow"
+      />
+      <span className="min-w-[4ch] text-right text-xs text-content-tertiary tabular-nums">
+        {percent}%
+      </span>
+    </div>
+  );
+}

npm-packages/dashboard-common/src/features/data/components/DataView.tsx

@@ -35,6 +35,13 @@ export function DataView() {
     componentId: componentId ?? null,
   });
 
+  const schemaValidationProgress = useQuery(
+    udfs.getSchemas.schemaValidationProgress,
+    {
+      componentId: useNents().selectedNent?.id ?? null,
+    },
+  );
+
   const { activeSchema, inProgressSchema } = useMemo(() => {
     if (!schemas) return {};
 
@@ -80,6 +87,7 @@ export function DataView() {
             inProgressSchema={inProgressSchema}
             shapes={tables}
             hasShapeError={hadError}
+            schemaValidationProgress={schemaValidationProgress}
           />
         </Modal>
       )}

npm-packages/dashboard-common/src/features/data/components/IndexList.tsx

@@ -12,7 +12,7 @@ import { Spinner } from "@ui/Spinner";
 import { useQuery } from "convex/react";
 import { api } from "system-udfs/convex/_generated/api";
 import { Fragment } from "react";
-import { ProgressBar } from "@ui/ProgressBar";
+import { ProgressBarWithPercent } from "@ui/ProgressBar";
 import { Tooltip } from "@ui/Tooltip";
 import { cn } from "@ui/cn";
 import { Callout } from "@ui/Callout";
@@ -241,7 +241,7 @@ function IndexListRow({ index }: { index: Index }) {
             Backfill in progress
           </div>
           {index.backfill.stats && index.backfill.stats.totalDocs !== null && (
-            <IndexBackfillProgress
+            <ProgressBarWithPercent
               fraction={Math.min(
                 // numDocsIndexed is an estimate and can grow larger than totalDocs
                 // (in particular because if new documents are added during the backfill,
@@ -251,14 +251,19 @@ function IndexListRow({ index }: { index: Index }) {
                   index.backfill.stats.totalDocs,
               )}
               variant="stripes"
+              ariaLabel="Index backfill progress"
             />
           )}
         </div>
       )}
       {index.backfill.state === "backfilled" && (
         <div className="flex flex-col gap-1 pl-2">
           Backfill completed
-          <IndexBackfillProgress fraction={1} variant="solid" />
+          <ProgressBarWithPercent
+            fraction={1}
+            variant="solid"
+            ariaLabel="Index backfill progress"
+          />
         </div>
       )}
     </article>
@@ -294,29 +299,6 @@ function FieldList({ fields }: { fields: string[] }) {
   );
 }
 
-function IndexBackfillProgress({
-  fraction,
-  variant,
-}: {
-  fraction: number;
-  variant: "stripes" | "solid";
-}) {
-  const percent = Math.round(fraction * 100);
-  return (
-    <div className="flex items-center gap-3">
-      <ProgressBar
-        fraction={fraction}
-        ariaLabel="Index backfill progress"
-        variant={variant}
-        className="grow"
-      />
-      <span className="min-w-[4ch] text-right text-xs text-content-tertiary tabular-nums">
-        {percent}%
-      </span>
-    </div>
-  );
-}
-
 function getIndexType(
   index: Index,
 ): "database" | "search" | "vector" | "unknown" {

npm-packages/dashboard-common/src/features/data/components/ShowSchema.stories.tsx

@@ -92,3 +92,13 @@ export const EnforcedSchema: Story = {
     activeSchema: sampleSchema,
   },
 };
+
+export const SchemaValidationInProgress: Story = {
+  args: {
+    inProgressSchema: sampleSchema,
+    schemaValidationProgress: {
+      numDocsValidated: 1,
+      totalDocs: 2,
+    },
+  },
+};

npm-packages/dashboard-common/src/features/data/components/ShowSchema.tsx

@@ -11,6 +11,7 @@ import {
 import { SchemaJson, displaySchema } from "@common/lib/format";
 import { ReadonlyCode } from "@common/elements/ReadonlyCode";
 import { Spinner } from "@ui/Spinner";
+import { ProgressBarWithPercent } from "@ui/ProgressBar";
 
 export function ShowSchema({
   activeSchema,
@@ -20,6 +21,7 @@ export function ShowSchema({
   lineHighlighter = undefined,
   codeTransformation = (code) => code,
   showLearnMoreLink = true,
+  schemaValidationProgress = undefined,
 }: {
   activeSchema: SchemaJson | null | undefined;
   inProgressSchema: SchemaJson | null | undefined;
@@ -28,6 +30,10 @@ export function ShowSchema({
   lineHighlighter?: LineHighlighter;
   codeTransformation?: CodeTransformation;
   showLearnMoreLink?: boolean;
+  schemaValidationProgress?: {
+    numDocsValidated: number;
+    totalDocs: number | null;
+  } | null;
 }) {
   const displayedSchema = useMemo(() => {
     if (!activeSchema) {
@@ -87,10 +93,30 @@ export function ShowSchema({
 
             {inProgressSchema && (
               <div className="mt-4 flex items-center gap-1 text-sm text-content-secondary">
-                <div>
-                  <Spinner />
-                </div>{" "}
-                Code push in progress...
+                {!schemaValidationProgress && (
+                  <div>
+                    <Spinner />
+                  </div>
+                )}
+                {schemaValidationProgress
+                  ? "Schema validation in progress..."
+                  : "Code push in progress..."}
+                {schemaValidationProgress &&
+                  schemaValidationProgress.totalDocs !== null && (
+                    <div className="grow sm:px-6">
+                      <ProgressBarWithPercent
+                        // totalDocs is not necessarily taken from the same snapshot as the snapshot being iterated over to increment numDocsValidated
+                        // so we cap the progress at 99%
+                        fraction={Math.min(
+                          0.99,
+                          schemaValidationProgress.numDocsValidated /
+                            schemaValidationProgress.totalDocs,
+                        )}
+                        variant="stripes"
+                        ariaLabel="Schema validation progress"
+                      />
+                    </div>
+                  )}
               </div>
             )}
           </HeadlessTab.Panel>