refactor(ui): Add loading indicators for post and patch requests

Signed-off-by: Johanna Lamppu <[email protected]>
doubleopen-project · Jul 3, 2024 · 849e32e · 849e32e
1 parent 01452b3
commit 849e32e
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 33 deletions.
diff --git a/ui/src/routes/_layout/create-organization.tsx b/ui/src/routes/_layout/create-organization.tsx
@@ -19,6 +19,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -53,7 +54,7 @@ const CreateOrganizationPage = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
 
-  const { mutateAsync } = useOrganizationsServicePostOrganizations({
+  const { mutateAsync, isPending } = useOrganizationsServicePostOrganizations({
     onSuccess() {
       toast({
         title: 'Create Organization',
@@ -125,7 +126,16 @@ const CreateOrganizationPage = () => {
             />
           </CardContent>
           <CardFooter>
-            <Button type='submit'>Create</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Creating organization...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Create'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>

diff --git a/ui/src/routes/_layout/organizations/$orgId/create-product.tsx b/ui/src/routes/_layout/organizations/$orgId/create-product.tsx
@@ -19,6 +19,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -55,7 +56,7 @@ const CreateProductPage = () => {
   const params = Route.useParams();
   const { toast } = useToast();
 
-  const { mutateAsync } = useProductsServicePostProduct({
+  const { mutateAsync, isPending } = useProductsServicePostProduct({
     onSuccess() {
       toast({
         title: 'Create Product',
@@ -131,7 +132,16 @@ const CreateProductPage = () => {
             />
           </CardContent>
           <CardFooter>
-            <Button type='submit'>Create</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Creating product...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Create'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>

diff --git a/ui/src/routes/_layout/organizations/$orgId/edit.tsx b/ui/src/routes/_layout/organizations/$orgId/edit.tsx
@@ -20,6 +20,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -66,25 +67,26 @@ const EditOrganizationPage = () => {
       }),
   });
 
-  const { mutateAsync } = useOrganizationsServicePatchOrganizationById({
-    onSuccess() {
-      toast({
-        title: 'Edit Organization',
-        description: 'Organization updated successfully.',
-      });
-      navigate({
-        to: '/organizations/$orgId',
-        params: { orgId: params.orgId },
-      });
-    },
-    onError(error: ApiError) {
-      toast({
-        title: error.message,
-        description: <ToastError error={error} />,
-        variant: 'destructive',
-      });
-    },
-  });
+  const { mutateAsync, isPending } =
+    useOrganizationsServicePatchOrganizationById({
+      onSuccess() {
+        toast({
+          title: 'Edit Organization',
+          description: 'Organization updated successfully.',
+        });
+        navigate({
+          to: '/organizations/$orgId',
+          params: { orgId: params.orgId },
+        });
+      },
+      onError(error: ApiError) {
+        toast({
+          title: error.message,
+          description: <ToastError error={error} />,
+          variant: 'destructive',
+        });
+      },
+    });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -148,10 +150,20 @@ const EditOrganizationPage = () => {
               className='m-1'
               variant='outline'
               onClick={() => navigate({ to: '/organizations/' + params.orgId })}
+              disabled={isPending}
             >
               Cancel
             </Button>
-            <Button type='submit'>Submit</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Editing organization...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Submit'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>

diff --git a/ui/src/routes/_layout/organizations/$orgId/products/$productId/create-repository.tsx b/ui/src/routes/_layout/organizations/$orgId/products/$productId/create-repository.tsx
@@ -19,6 +19,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -62,7 +63,7 @@ const CreateRepositoryPage = () => {
   const params = Route.useParams();
   const { toast } = useToast();
 
-  const { mutateAsync } = useRepositoriesServiceCreateRepository({
+  const { mutateAsync, isPending } = useRepositoriesServiceCreateRepository({
     onSuccess() {
       toast({
         title: 'Create Repository',
@@ -150,7 +151,16 @@ const CreateRepositoryPage = () => {
             />
           </CardContent>
           <CardFooter>
-            <Button type='submit'>Create</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Creating repository...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Create'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>

diff --git a/ui/src/routes/_layout/organizations/$orgId/products/$productId/edit.tsx b/ui/src/routes/_layout/organizations/$orgId/products/$productId/edit.tsx
@@ -20,6 +20,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -70,7 +71,7 @@ const EditProductPage = () => {
       }),
   });
 
-  const { mutateAsync } = useProductsServicePatchProductById({
+  const { mutateAsync, isPending } = useProductsServicePatchProductById({
     onSuccess() {
       toast({
         title: 'Edit Product',
@@ -160,10 +161,20 @@ const EditProductPage = () => {
                     params.productId,
                 })
               }
+              disabled={isPending}
             >
               Cancel
             </Button>
-            <Button type='submit'>Submit</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Editing product...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Submit'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>

diff --git a/...utes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/create-run.tsx b/...utes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/create-run.tsx
@@ -19,7 +19,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { PlusIcon, TrashIcon } from 'lucide-react';
+import { Loader2, PlusIcon, TrashIcon } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -193,7 +193,7 @@ const CreateRunPage = () => {
   const { toast } = useToast();
   const ortRun = Route.useLoaderData();
 
-  const { mutateAsync } = useRepositoriesServicePostOrtRun({
+  const { mutateAsync, isPending } = useRepositoriesServicePostOrtRun({
     onSuccess() {
       toast({
         title: 'Create ORT Run',
@@ -1204,7 +1204,16 @@ const CreateRunPage = () => {
             </Accordion>
           </CardContent>
           <CardFooter>
-            <Button type='submit'>Create</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Creating run...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Create'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>

diff --git a/ui/src/routes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/edit.tsx b/ui/src/routes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/edit.tsx
@@ -20,6 +20,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -84,7 +85,7 @@ const EditRepositoryPage = () => {
       }),
   });
 
-  const { mutateAsync } = useRepositoriesServicePatchRepositoryById({
+  const { mutateAsync, isPending } = useRepositoriesServicePatchRepositoryById({
     onSuccess() {
       toast({
         title: 'Edit repository',
@@ -192,10 +193,20 @@ const EditRepositoryPage = () => {
                     params.productId,
                 })
               }
+              disabled={isPending}
             >
               Cancel
             </Button>
-            <Button type='submit'>Submit</Button>
+            <Button type='submit' disabled={isPending}>
+              {isPending ? (
+                <>
+                  <span className='sr-only'>Editing repository...</span>
+                  <Loader2 size={16} className='mx-3 animate-spin' />
+                </>
+              ) : (
+                'Submit'
+              )}
+            </Button>
           </CardFooter>
         </form>
       </Form>