nitro-web 0.0.109 → 0.0.110

package/client/css/components.css

@@ -81,4 +81,18 @@
 
 .__PrivateStripeElementLoader {
   display: none !important;
+}
+
+/* ---- Animation ------------------------- */
+
+@keyframes dots {
+  0%, 20% { content: ""; }
+  40% { content: "."; }
+  60% { content: ".."; }
+  80%, 100% { content: "..."; }
+}
+
+.loading-dots::after {
+  content: "";
+  animation: dots 2s steps(1, end) infinite;
 }

package/components/partials/element/table.tsx

@@ -42,6 +42,7 @@ export type TableProps<T> = {
   columnHeaderClassName?: string
   checkboxClassName?: string
   checkboxSize?: number
+  isLoading?:boolean
 }
 
 export function Table<T extends TableRow>({ 
@@ -67,6 +68,7 @@ export function Table<T extends TableRow>({
   columnHeaderClassName,
   checkboxClassName,
   checkboxSize=16,
+  isLoading=false,
 }: TableProps<T>) {
   const location = useLocation()
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
@@ -87,7 +89,7 @@ export function Table<T extends TableRow>({
 
   const onSelect = useCallback((idOrAll: string, checked: boolean) => {
     setSelectedRowIds((o) => {
-      if (idOrAll == 'all' && checked) return rows.map(row => row?._id||'')
+      if (idOrAll == 'all' && checked) return (rows ?? []).map(row => row?._id||'')
       else if (idOrAll == 'all' && !checked) return []
       else if (o.includes(idOrAll) && !checked) return o.filter(id => id != idOrAll)
       else if (!o.includes(idOrAll) && checked) return [...o, idOrAll]
@@ -101,7 +103,7 @@ export function Table<T extends TableRow>({
   }, [])
 
   // Reset selected rows when the location changes, or the number of rows changed (e.g. when a row is removed)
-  useEffect(() => setSelectedRowIds([]), [location.key, rows.map(row => row?._id||'').join(',')])
+  useEffect(() => setSelectedRowIds([]), [location.key, (rows ?? []).map(row => row?._id||'').join(',')])
 
   // --- Sorting ---
 
@@ -287,11 +289,12 @@ export function Table<T extends TableRow>({
                   >
                     <div
                       className={twMerge(
-                        'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500',
+                        'absolute top-0 h-full flex items-center justify-center text-sm',
+                        isLoading ? '' : 'text-gray-500',
                         col.innerClassName
                       )}
                     >
-                      { j == 0 && 'No records found.' }
+                      { j == 0 && (isLoading ? <>Loading<span className="relative ml-[2px] loading-dots" /></> : 'No records found.') }
                     </div>
                   </div>
                 )

package/components/partials/styleguide.tsx

@@ -505,6 +505,15 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
           generateTd={generateTd}
           className="mb-6"
         />
+        <Table
+          rows={[]}
+          columns={thead}
+          rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+          generateCheckboxActions={generateCheckboxActions}
+          generateTd={generateTd}
+          className="mb-6"
+          isLoading={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.109",
+  "version": "0.0.110",
   "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 🚀",