feat: add loading spinner in show more + minor style enhancements

PHILLIPS71 · May 13, 2024 · 614942c · 614942c
1 parent 8ec6277
commit 614942c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/app/src/components/interfaces/dashboard/encode-queue/EncodeQueue.tsx b/app/src/components/interfaces/dashboard/encode-queue/EncodeQueue.tsx
@@ -6,7 +6,7 @@ import type {
 import type { EncodeQueueRefetchQuery } from '@/__generated__/EncodeQueueRefetchQuery.graphql'
 
 import { Button, Link, Table } from '@giantnodes/react'
-import { IconProgressX } from '@tabler/icons-react'
+import { IconCircleX } from '@tabler/icons-react'
 import React from 'react'
 import { graphql, useMutation, usePaginationFragment } from 'react-relay'
 
@@ -64,10 +64,10 @@ type EncodeQueueProps = {
 }
 
 const EncodeQueue: React.FC<EncodeQueueProps> = ({ $key }) => {
-  const { data, hasNext, loadNext } = usePaginationFragment<EncodeQueueRefetchQuery, EncodeQueueFragment_query$key>(
-    FRAGMENT,
-    $key
-  )
+  const { data, hasNext, isLoadingNext, loadNext } = usePaginationFragment<
+    EncodeQueueRefetchQuery,
+    EncodeQueueFragment_query$key
+  >(FRAGMENT, $key)
 
   const [commit] = useMutation<EncodeQueueCancelMutation>(MUTATION)
 
@@ -86,7 +86,7 @@ const EncodeQueue: React.FC<EncodeQueueProps> = ({ $key }) => {
 
   return (
     <>
-      <Table headingless aria-label="encode table">
+      <Table headingless aria-label="encode queue" size="sm">
         <Table.Head>
           <Table.Column key="name" isRowHeader>
             name
@@ -121,7 +121,7 @@ const EncodeQueue: React.FC<EncodeQueueProps> = ({ $key }) => {
                     item.node.status !== 'FAILED' && (
                       <div className="flex flex-row justify-end gap-2">
                         <Button color="neutral" size="xs" onPress={() => cancel(item.node)}>
-                          <IconProgressX size={16} />
+                          <IconCircleX size={16} />
                         </Button>
                       </div>
                     )}
@@ -134,7 +134,7 @@ const EncodeQueue: React.FC<EncodeQueueProps> = ({ $key }) => {
 
       {hasNext && (
         <div className="flex flex-row items-center justify-center p-2">
-          <Button size="xs" onPress={() => loadNext(8)}>
+          <Button isLoading={isLoadingNext} size="xs" onPress={() => loadNext(8)}>
             Show more
           </Button>
         </div>

diff --git a/app/src/components/interfaces/explore/table/ExploreTable.tsx b/app/src/components/interfaces/explore/table/ExploreTable.tsx
@@ -71,7 +71,9 @@ const ExploreTable: React.FC<ExploreTableProps> = ({ $key }) => {
             </Table.Cell>
 
             <Table.Cell>
-              <Typography.Paragraph className="text-right">{filesize(item.size, { base: 2 })}</Typography.Paragraph>
+              <Typography.Paragraph className="text-sm text-right" variant="subtitle">
+                {filesize(item.size, { base: 2 })}
+              </Typography.Paragraph>
             </Table.Cell>
           </Table.Row>
         )}