nitro-web 0.0.169 → 0.0.171

package/client/index.ts

@@ -23,7 +23,7 @@ export { Styleguide } from '../components/partials/styleguide'
 // Component Elements
 export { Accordion } from '../components/partials/element/accordion'
 export { Avatar } from '../components/partials/element/avatar'
-export { Button } from '../components/partials/element/button'
+export { Button, Spinner } from '../components/partials/element/button'
 export { Calendar, type CalendarProps } from '../components/partials/element/calendar'
 export { Dropdown, type DropdownProps, type DropdownOption } from '../components/partials/element/dropdown'
 export { Filters, type FilterType, usePushChangesToPath } from '../components/partials/element/filters'
@@ -36,6 +36,7 @@ export { TimePicker, type TimePickerProps } from '../components/partials/element
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
 export { Table, type TableColumn, type TableProps, type TableRow, type TableRowType } from '../components/partials/element/table'
+export { LoadingWithDots, LoadingOverlay } from '../components/partials/element/loading'
 
 // Component Form Elements
 export { Checkbox } from '../components/partials/form/checkbox'

package/components/partials/element/button.tsx

@@ -41,16 +41,16 @@ export function Button({
 
   // Button colors, you can use custom colors by using className instead
   const colors = {
-    'primary': 'bg-primary hover:bg-primary-hover ring-transparent text-white [&>.loader]:border-white',
-    'secondary': 'bg-secondary hover:bg-secondary-hover ring-transparent text-white [&>.loader]:border-white',
-    'black': 'bg-black hover:bg-gray-800 ring-transparent text-white [&>.loader]:border-white',
-    'dark': 'bg-gray-800 hover:bg-gray-700 ring-transparent text-white [&>.loader]:border-white',
-    'white': 'bg-white hover:bg-gray-50 ring-gray-300 text-gray-900 [&>.loader]:border-black', // maybe change to text-foreground
-    'clear': 'hover:bg-gray-50 ring-gray-300 hover:text-foreground [&>.loader]:border-foreground !shadow-none',
-    'danger': 'bg-danger hover:bg-danger-hover ring-transparent text-white [&>.loader]:border-white',
-    'warning': 'bg-warning hover:bg-warning-hover ring-transparent text-white [&>.loader]:border-white',
-    'info': 'bg-info hover:bg-info-hover ring-transparent text-white [&>.loader]:border-white',
-    'success': 'bg-success hover:bg-success-hover ring-transparent text-white [&>.loader]:border-white',
+    'primary': 'bg-primary hover:bg-primary-hover ring-transparent text-white [&>.spinner]:border-white',
+    'secondary': 'bg-secondary hover:bg-secondary-hover ring-transparent text-white [&>.spinner]:border-white',
+    'black': 'bg-black hover:bg-gray-800 ring-transparent text-white [&>.spinner]:border-white',
+    'dark': 'bg-gray-800 hover:bg-gray-700 ring-transparent text-white [&>.spinner]:border-white',
+    'white': 'bg-white hover:bg-gray-50 ring-gray-300 text-gray-900 [&>.spinner]:border-black', // maybe change to text-foreground
+    'clear': 'hover:bg-gray-50 ring-gray-300 hover:text-foreground [&>.spinner]:border-foreground !shadow-none',
+    'danger': 'bg-danger hover:bg-danger-hover ring-transparent text-white [&>.spinner]:border-white',
+    'warning': 'bg-warning hover:bg-warning-hover ring-transparent text-white [&>.spinner]:border-white',
+    'info': 'bg-info hover:bg-info-hover ring-transparent text-white [&>.spinner]:border-white',
+    'success': 'bg-success hover:bg-success-hover ring-transparent text-white [&>.spinner]:border-white',
   }
   
   // Button sizes (px is better for height consistency)
@@ -91,12 +91,17 @@ export function Button({
       </span>
       {(IconRight || IconRightEnd) && getIcon(IconRight || IconRightEnd)}
       {
-        isLoading &&
-        <span className={
-          'loader !opacity-100 absolute top-[50%] left-[50%] w-[1rem] h-[1rem] ml-[-0.5rem] mt-[-0.5rem] ' +
-          'rounded-full animate-spin border-2 !border-t-transparent'
-        } />
+        isLoading && <Spinner className={'!opacity-100 size-[1rem]'} absoluteCenter={true} />
       }
     </button>
   )
 }
+
+export function Spinner({ className, absoluteCenter }: { className?: string, absoluteCenter?: boolean }) {
+  const absoluteCenterClass = absoluteCenter ? 'absolute top-[50%] left-[50%] ml-[-0.5rem] mt-[-0.5rem]' : ''
+  return (
+    <span
+      className={twMerge(`spinner border-black border-2 inline-block size-[1em] rounded-full animate-spin ${absoluteCenterClass} ${className||''} !border-t-transparent `)}
+    />
+  )
+}

package/components/partials/element/loading.tsx

@@ -0,0 +1,25 @@
+import { Spinner, twMerge } from 'nitro-web'
+
+export function LoadingWithDots({ message='Loading', className, classNameDots }: { 
+  message?: string, 
+  className?: string, 
+  classNameDots?: string 
+}) {
+  return (
+    <span className={`flex items-center gap-[0.2em] ${className}`}>
+      {message}<span className={twMerge('relative loading-dots', classNameDots)} />
+    </span> 
+  )
+}
+
+export function LoadingOverlay({ message='Loading', className }: { message?: string, className?: string }) {
+  return (
+    <div 
+      className={twMerge('absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10 text-sm [&>span]:bg-white', className)}
+    >
+      <span className="inline-block flex items-center justify-center gap-3 p-2">
+        <Spinner />{message}
+      </span>
+    </div>
+  )
+}

package/components/partials/element/table.tsx

@@ -1,6 +1,6 @@
 import { JSX, useState, useCallback, Fragment, useMemo, useEffect } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
-import { Checkbox, queryObject, queryString, twMerge } from 'nitro-web'
+import { Checkbox, queryObject, queryString, Spinner, twMerge, LoadingWithDots, LoadingOverlay } from 'nitro-web'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 export type TableRowType = 'row' | 'loading' | 'empty' | 'thead'
@@ -45,7 +45,11 @@ export type TableProps<T> = {
   columnHeaderClassName?: string
   checkboxClassName?: string
   checkboxSize?: number
+  loadingOverlayClassName?: string
   isLoading?:boolean
+  loadingMessage?: string
+  showLoadingInline?: boolean|JSX.Element
+  showLoadingOverlay?: boolean|JSX.Element
 }
 
 export function Table<T extends TableRow>({ 
@@ -71,7 +75,12 @@ export function Table<T extends TableRow>({
   columnHeaderClassName,
   checkboxClassName,
   checkboxSize=16,
+  loadingOverlayClassName,
+  // Loading
   isLoading=false,
+  loadingMessage,
+  showLoadingInline=false,
+  showLoadingOverlay=true,
 }: TableProps<T>) {
   const location = useLocation()
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
@@ -80,9 +89,9 @@ export function Table<T extends TableRow>({
   const [rand] = useState(() => new Date().getTime() + Math.random())
 
   const rowsToRender = useMemo(() => {
-    // 1) Only show the first row when loading (content hidden), 2) an empty row when there are no records, or all rows
-    return rows.length > 0 ? (isLoading ? rows.slice(0, 1) : rows) : [{ _id: '' }] as unknown as T[]
-  }, [rows, isLoading])
+    // 1) Only show the first row when loading inline(content hidden), 2) an empty row when there are no records, or all rows
+    return rows.length > 0 ? ((isLoading && showLoadingInline) ? rows.slice(0, 1) : rows) : [{ _id: '' }] as unknown as T[]
+  }, [rows, isLoading, showLoadingInline])
 
   const columns = useMemo(() => {
     const checkboxCol: TableColumn = { value: 'checkbox', label: '', disableSort: true }
@@ -145,7 +154,7 @@ export function Table<T extends TableRow>({
     >
       <div 
         style={{ borderSpacing: `0 ${rowGap}px` }}
-        className={twMerge('table w-full border-separate', tableClassName)}
+        className={twMerge('table w-full border-separate', showLoadingOverlay ? 'relative' : '', tableClassName)}
       >
         {/* Thead row */}
         <div className="table-row relative">
@@ -181,7 +190,7 @@ export function Table<T extends TableRow>({
                   > 
                     {
                       col.value == 'checkbox'
-                        ? <>
+                        ? <Fragment>
                             <Checkbox 
                               size={checkboxSize}
                               name={`checkbox-all-${rand}`}
@@ -195,7 +204,7 @@ export function Table<T extends TableRow>({
                             >
                               {generateCheckboxActions && generateCheckboxActions(selectedRowIds)}
                             </div>
-                          </>
+                          </Fragment>
                         : <span className={twMerge(
                             'flex items-center gap-x-2 transition-opacity',
                             selectedRowIds.length ? 'opacity-0' : '',
@@ -267,9 +276,9 @@ export function Table<T extends TableRow>({
                             />
                           }
                           {
-                            // Rows (content hidden when loading)
+                            // Rows (content hidden when loading inline)
                             row._id &&
-                            <div className={isLoading ? 'opacity-0 pointer-events-none' : ''}>
+                            <div className={isLoading && showLoadingInline ? 'opacity-0 pointer-events-none' : ''}>
                               {
                                 col.value == 'checkbox'
                                   ? <Checkbox 
@@ -287,10 +296,21 @@ export function Table<T extends TableRow>({
                             </div>
                           }
                           {
-                            // Show "loading" or "no records" text in the first column
-                            j == 0 && (isLoading || !row._id) &&
-                            <div className={'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500'}>
-                              { isLoading ? <>Loading<span className="relative ml-[2px] loading-dots" /></> : 'No records found.' }
+                            // Show "no records" or "loading" text in the first column
+                            j == 0 && (!row._id || isLoading) &&
+                            <div className={'absolute top-0 h-full flex items-center justify-center gap-3 text-sm text-gray-500'}>
+                              {
+                                (!row._id && !isLoading) ? (
+                                  'No records found.' 
+                                ) : (!row._id && isLoading && showLoadingInline === true) ? (
+                                  <Fragment>
+                                    <Spinner className="border-gray-500" />
+                                    <LoadingWithDots message={loadingMessage} />
+                                  </Fragment>
+                                ) : (!row._id && isLoading && showLoadingInline) ? (
+                                  showLoadingInline
+                                ) : null
+                              }
                             </div>
                           }
                         </div>
@@ -302,6 +322,11 @@ export function Table<T extends TableRow>({
             )
           })
         }
+        { 
+          (isLoading && showLoadingOverlay === true) 
+            ? <LoadingOverlay className={twMerge('m-[1px]', loadingOverlayClassName)} message={loadingMessage} /> 
+            : (isLoading && showLoadingOverlay) ? showLoadingOverlay : null
+        }
       </div>
     </div>
   )

package/components/partials/styleguide.tsx

@@ -1,6 +1,6 @@
 import { 
   Drop, Dropdown, Field, Select, Button as ButtonNitro, Checkbox, GithubLink, Modal, Calendar, injectedConfig, TimePicker,
-  Filters, FilterType, Table, TableColumn, usePushChangesToPath,
+  Filters, FilterType, Table, TableColumn, usePushChangesToPath, Spinner, LoadingWithDots,
 } from 'nitro-web'
 import { date, getCurrencyOptions, onChange, ucFirst } from 'nitro-web/util'
 import { Check, EllipsisVerticalIcon, FileEditIcon } from 'lucide-react'
@@ -44,6 +44,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
     'Filters',
     'Button Colors & Sizes',
     'Button Icons',
+    'Loading Elements',
     'Varients',
     'Selects',
     'Inputs',
@@ -367,6 +368,18 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
+      {groups.includes('Loading Elements') && (
+        <div>
+          <h2 class="h3">Loading Elements</h2>
+          <div class="flex flex-wrap gap-x-6 gap-y-4 items-center mb-6">
+            <div><Spinner /></div>
+            <div><Spinner className="border-secondary" /></div>
+            <div><Spinner className="border-primary border-[3px]" /></div>
+            <div><LoadingWithDots message="Loading" /></div>
+          </div>
+        </div>
+      )}
+
       {groups.includes('Varients') && (
         <div>
           <h2 class="h3">Varients</h2>
@@ -659,6 +672,17 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
             className="mb-6"
             isLoading={true}
           />
+          <Table
+            rows={[]}
+            columns={thead}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
+            className="mb-6"
+            isLoading={true}
+            showLoadingOverlay={false}
+            showLoadingInline={true}
+          />
           <Table
             rows={rows.slice(0, 2).map(row => ({ ...row, _id: row._id + '1' }))}
             columns={thead}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.169",
+  "version": "0.0.171",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",