Adding a progress bar

src/components/user/User.tsx

@@ -1,6 +1,14 @@
 import { createForm } from '@felte/solid';
-import { Component, Index, Match, onMount, Show, Switch } from 'solid-js';
-import { TextField, Button } from '@kobalte/core';
+import {
+  Component,
+  createSignal,
+  Index,
+  Match,
+  onMount,
+  Show,
+  Switch,
+} from 'solid-js';
+import { TextField, Button, Progress } from '@kobalte/core';
 import reporter from '@felte/reporter-tippy';
 import './style.css';
 import { useNavigate } from 'solid-start';
@@ -18,6 +26,8 @@ interface Props {
 const User: Component<Props> = (props) => {
   const navigate = useNavigate();
 
+  const [progress, setProgress] = createSignal(-1);
+
   const credentials = adminCredentials();
   const { database } = credentials || { database: null };
 
@@ -37,6 +47,7 @@ const User: Component<Props> = (props) => {
       values,
       context,
     });
+    setProgress(0);
     const id = getValues()?._id ?? userId(values.username, values.database);
     await put(id, values, isNew());
     const couchUserId = `org.couchdb.user:${values.username}`;
@@ -49,6 +60,8 @@ const User: Component<Props> = (props) => {
     };
     await put(couchUserId, userDoc, isNew(), '_users');
 
+    setProgress(1);
+
     const subscriptions = !!props?.values
       ? props.values().subscriptions ?? []
       : [];
@@ -74,6 +87,8 @@ const User: Component<Props> = (props) => {
       }
     }
 
+    setProgress(2);
+
     for (let i = 0; i < subscriptions.length; i++) {
       let subscription = subscriptions[i];
       if (!isIn(subscription.username, updatedSubscriptions)) {
@@ -83,10 +98,12 @@ const User: Component<Props> = (props) => {
         });
       }
     }
+    setProgress(3);
 
     setInitialValues(values);
     setIsDirty(false);
 
+    setProgress(-1);
     navigate(`/user/${id}`);
   };
 
@@ -200,6 +217,28 @@ const User: Component<Props> = (props) => {
 
   return (
     <>
+      <Show when={progress() >= 0}>
+        <Progress.Root
+          value={progress()}
+          minValue={0}
+          maxValue={10}
+          getValueLabel={({ value, max }) =>
+            `${value} of ${max} tasks completed`
+          }
+          class='progress'
+        >
+          <div class='progress__label-container'>
+            <Progress.Label class='progress__label'>
+              Processing...
+            </Progress.Label>
+            <Progress.ValueLabel class='progress__value-label' />
+          </div>
+          <Progress.Track class='progress__track'>
+            <Progress.Fill class='progress__fill' />
+          </Progress.Track>
+        </Progress.Root>
+      </Show>
+      <Show when={progress() < 0}>
         <Show when={!isNew()}>
           <h2>{userId(data('username'), data('database'))}</h2>
         </Show>
@@ -296,6 +335,7 @@ const User: Component<Props> = (props) => {
           </Switch>
           <Button.Root onclick={cancelHandler}>Back</Button.Root>
         </form>
+      </Show>
     </>
   );
 };

src/components/user/style.css

@@ -142,3 +142,33 @@ form {
     transform: scale(0.96);
   }
 }
+
+
+.progress {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 300px;
+}
+.progress__label-container {
+  display: flex;
+  justify-content: space-between;
+}
+.progress__label,
+.progress__value-label {
+  color: hsl(240 4% 16%);
+  font-size: 14px;
+}
+.progress__track {
+  height: 10px;
+  background-color: hsl(240 6% 90%);
+}
+.progress__fill {
+  background-color: hsl(200 98% 39%);
+  height: 100%;
+  width: var(--kb-progress-fill-width);
+  transition: width 250ms linear;
+}
+.progress__fill[data-progress="complete"] {
+  background-color: #16a34a;
+}