feat(pagination): add loading behavior

lucasaarcoverde · lucasaarcoverde · commit a3dc543f9c9d · 2023-11-24T10:23:06.000-03:00
diff --git a/packages/components/src/pagination/pagination-select.tsx b/packages/components/src/pagination/pagination-select.tsx
@@ -0,0 +1,67 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+
+import { Action } from '../action'
+
+import { Select, SelectPopover, SelectProvider } from '../select'
+import { Bleed } from '../bleed'
+import { Skeleton } from '../skeleton'
+
+export const PaginationSelect = forwardRef<
+  HTMLDivElement,
+  PaginationSelectProps
+>(function Pagination(props, ref) {
+  const {
+    loading = false,
+    value,
+    options,
+    label,
+    onValueChange,
+    children,
+    disabled = false,
+    ...otherProps
+  } = props
+
+  if (loading) {
+    console.log({ loading })
+
+    return (
+      <div data-sl-pagination-select data-loading={loading}>
+        <Skeleton />
+      </div>
+    )
+  }
+
+  return (
+    <div data-sl-pagination-select ref={ref} {...otherProps}>
+      {options.length === 1 ? (
+        <div data-sl-pagination-label>{label}</div>
+      ) : (
+        <SelectProvider
+          value={String(value)}
+          setValue={(value) => onValueChange?.(Number(value))}
+        >
+          <Select asChild>
+            <Action data-sl-pagination-select-action disabled={disabled}>
+              {label}
+            </Action>
+          </Select>
+          <Bleed>
+            <SelectPopover data-sl-pagination-select-popover>
+              {children}
+            </SelectPopover>
+          </Bleed>
+        </SelectProvider>
+      )}
+    </div>
+  )
+})
+
+export interface PaginationSelectProps extends ComponentPropsWithoutRef<'div'> {
+  onValueChange?: (value: number) => void
+  value: number
+  options: number[]
+  loading?: boolean
+  label: ReactNode
+  disabled?: boolean
+}
diff --git a/packages/components/src/pagination/pagination.css b/packages/components/src/pagination/pagination.css
@@ -5,12 +5,27 @@
     letter-spacing: var(--sl-text-emphasis-letter-spacing);
   }
 
+  [data-sl-pagination-select-action] {
+    font: var(--sl-text-emphasis-font);
+    letter-spacing: var(--sl-text-emphasis-letter-spacing);
+  }
+
   [data-sl-pagination-select-popover] {
     margin-top: var(--sl-space-1);
     max-height: 12.75rem;
     overflow-y: auto;
   }
 
+  [data-sl-pagination-select][data-loading='true'] {
+    width: 2.75rem;
+    height: 1.25rem;
+  }
+
+  [data-sl-pagination-total-label][data-loading='true'] {
+    width: 4.125rem;
+    height: 1.25rem;
+  }
+
   [data-sl-pagination-actions] {
     display: flex;
     align-items: center;
diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx
@@ -2,15 +2,12 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef, useMemo } from 'react'
 import { Stack } from '../stack'
 import { Action } from '../action'
-import {
-  IconCaretDown,
-  IconCaretLeft,
-  IconCaretRight,
-} from '@vtex/shoreline-icons'
+import { IconCaretLeft, IconCaretRight } from '@vtex/shoreline-icons'
 
 import './pagination.css'
-import { Select, SelectOption, SelectPopover, SelectProvider } from '../select'
-import { Bleed } from '../bleed'
+import { SelectOption } from '../select'
+import { Skeleton } from '../skeleton'
+import { PaginationSelect } from './pagination-select'
 
 /**
  * Pagination triggers allow merchants to view the size of a list and navigate between pages.
@@ -35,90 +32,76 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       total,
       onSizeChange,
       onPageChange,
+      loading = false,
       ...otherProps
     } = props
 
     const hasSizes = sizeOptions.length > 0
 
-    const totalPages = Math.ceil(total / size)
+    const totalPages = useMemo(() => Math.ceil(total / size), [total, size])
 
-    const pageOptions = useMemo(
-      () => [...Array(totalPages).keys()].slice(1),
-      [total, size]
-    )
+    const pageOptions = useMemo(() => {
+      const totalPages = Math.ceil(total / size)
+
+      return [...Array(totalPages).keys()].slice(1)
+    }, [total, size])
 
     return (
       <div data-sl-pagination ref={ref} {...otherProps}>
         <Stack direction="row" space="$space-2">
           {hasSizes && (
-            <SelectProvider
-              value={String(size)}
-              setValue={(value) => onSizeChange?.(Number(value))}
+            <PaginationSelect
+              data-sl-pagination-size-select
+              value={size}
+              options={sizeOptions}
+              onValueChange={(value) => onSizeChange?.(value)}
+              label={`Show ${size}`}
+              disabled={loading}
             >
-              <Select asChild>
-                <Action>
-                  Show {size} <IconCaretDown width={16} height={16} />
-                </Action>
-              </Select>
-              <Bleed>
-                <SelectPopover data-sl-pagination-select-popover>
-                  {sizeOptions.map((sizeOption) => (
-                    <SelectOption value={String(sizeOption)}>
-                      Show {sizeOption}
-                    </SelectOption>
-                  ))}
-                </SelectPopover>
-              </Bleed>
-            </SelectProvider>
+              {sizeOptions.map((option) => (
+                <SelectOption value={String(option)}>
+                  Show {option}
+                </SelectOption>
+              ))}
+            </PaginationSelect>
           )}
 
-          <div data-sl-pagination-total-label>{total} items</div>
+          <div data-sl-pagination-total-label data-loading={loading}>
+            {loading ? <Skeleton /> : `${total} items`}
+          </div>
 
           <div data-sl-pagination-actions>
             <Action
               iconOnly
               onClick={() => {
                 onPageChange?.(page - 1, 'prev')
               }}
-              disabled={page === 1}
+              disabled={page === 1 || loading}
               aria-label="Previous page"
               data-sl-pagination-action-prev
             >
               <IconCaretLeft />
             </Action>
 
-            {totalPages === 1 ? (
-              <div data-sl-pagination-page-label>
-                {page} of {totalPages}
-              </div>
-            ) : (
-              <SelectProvider
-                value={String(page)}
-                setValue={(value) => onPageChange?.(Number(value), 'selection')}
-              >
-                <Select asChild>
-                  <Action>
-                    {page} of {totalPages}
-                  </Action>
-                </Select>
-                <Bleed>
-                  <SelectPopover data-sl-pagination-select-popover>
-                    {pageOptions.map((pageOption) => (
-                      <SelectOption value={String(pageOption)}>
-                        {pageOption}
-                      </SelectOption>
-                    ))}
-                  </SelectPopover>
-                </Bleed>
-              </SelectProvider>
-            )}
+            <PaginationSelect
+              data-sl-pagination-page-select
+              onValueChange={(value) => onPageChange?.(value, 'selection')}
+              value={page}
+              options={pageOptions}
+              loading={loading}
+              label={`${page} of ${pageOptions.length}`}
+            >
+              {pageOptions.map((option) => (
+                <SelectOption value={String(option)}>{option}</SelectOption>
+              ))}
+            </PaginationSelect>
 
             <Action
               iconOnly
               onClick={() => {
                 onPageChange?.(page + 1, 'next')
               }}
-              disabled={page === totalPages}
+              disabled={page === totalPages || loading}
               aria-label="Next page"
               data-sl-pagination-action-next
             >
@@ -138,4 +121,5 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'div'> {
   size: number
   page: number
   total: number
+  loading?: boolean
 }
diff --git a/packages/components/src/pagination/stories/pagination.stories.tsx b/packages/components/src/pagination/stories/pagination.stories.tsx
@@ -1,4 +1,5 @@
 import './style.css'
+
 import React, { useState } from 'react'
 
 import { Pagination } from '../index'
@@ -8,20 +9,19 @@ export default {
 }
 
 export function Default() {
-  const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(25)
+  const [pagination, setPagination] = useState({ page: 1, size: 25 })
 
   return (
     <div className="pagination-container">
       <Pagination
-        page={page}
+        page={pagination.page}
         onPageChange={(page) => {
-          setPage(page)
+          setPagination((prev) => ({ ...prev, page }))
         }}
         total={754}
         sizeOptions={[25, 50, 100]}
-        size={pageSize}
-        onSizeChange={(size) => setPageSize(size)}
+        size={pagination.size}
+        onSizeChange={(size) => setPagination((prev) => ({ ...prev, size }))}
       />
     </div>
   )
@@ -43,3 +43,17 @@ export function WithoutPageSize() {
     </div>
   )
 }
+
+export function Loading() {
+  return (
+    <div className="pagination-container">
+      <Pagination
+        page={1}
+        total={754}
+        sizeOptions={[25, 50, 100]}
+        size={25}
+        loading
+      />
+    </div>
+  )
+}
diff --git a/packages/components/src/simple-table/stories/pagination.stories.tsx b/packages/components/src/simple-table/stories/pagination.stories.tsx
@@ -149,7 +149,7 @@ function getItems(page: number, size: number) {
       const paginatedData = data.slice(currentIndex, currentIndex + size)
 
       res(paginatedData)
-    }, 200)
+    }, 2000)
   })
 }
 
@@ -227,18 +227,23 @@ export function ServerPagination() {
   )
 
   const [{ page, size }, setPagination] = useState({ page: 1, size: 10 })
+  const [loading, setLoading] = useState(true)
 
   const [products, setProducts] = useState<Product[]>([])
 
   useEffect(() => {
+    if (loading) setLoading(true)
+
     getItems(page, size).then((products: Product[]) => {
+      setLoading(false)
       setProducts(products)
     })
   }, [page, size])
 
   return (
     <Stack>
       <Pagination
+        loading={loading}
         page={page}
         size={size}
         sizeOptions={[10, 25, 50]}
