Table: specifying both emptyContent and loadingContent shows both of them while content is loading?

[brunokc]

Does anybody else see this as well?

If I'm loading data dynamically, and use both loadingContent and emptyContent, NextUI will show both of them while isLoading is true and then either keep emptyContent if I get nothing back, or both of them disappear if the API returns actual content.

This is with NextUI v2.2.9.

Here:

nextui/packages/components/table/src/table-body.tsx

Line 100 in 0cc8c79

if (collection.size === 0 && bodyProps.emptyContent) {

It feels like this if should start with !isLoading?

  if (!isLoading && collection.size === 0 && bodyProps.emptyContent) {

[alphaxek]

Hi @brunokc, can you please share the code snippet

[brunokc]

Sure, sorry for not including it to begin with. The code below seems to repro the problem for me.

"use client";
import React from "react";
import {
  getKeyValue,
  Spinner,
  Table, TableHeader, TableColumn, TableBody, TableRow, TableCell,
} from "@nextui-org/react";

const state = {
  isLoading: true,
};

const columns = [
  {
    key: "name",
    label: "NAME",
  },
  {
    key: "role",
    label: "ROLE",
  },
  {
    key: "status",
    label: "STATUS",
  },
];

export default function App() {
  return (
    <Table aria-label="Example table with dynamic content">
      <TableHeader columns={columns}>
        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
      </TableHeader>
      <TableBody items={state.data ?? []}
        isLoading={state.isLoading}
        loadingContent={<Spinner label="Loading..." />}
        emptyContent={"No data. Click \"Add\" to add a new row."}
      >
        {(item) => (
          <TableRow key={item.key}>
            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

I'm using state as a placeholder for the return value from useSWR(...):

const state = useSWR(...);

So, on first render state.isLoading will be true and state.data will be undefined. That's when I get the broken UI.

[brunokc]

Opened issue #2470 to track this.

[alphaxek]

Hi @brunokc, Please try this client side logic.

emptyContent={
 !state.isLoading ? 'No data. Click "Add" to add a new row.' : ' '
}

If this helps please mark it as answered, will really appreciate, thanks!

[brunokc]

Thank you @alphaxek. Yes, it helps and I already used something like that. Don't you think it should be taken care by the framework, though?

[alphaxek]

great!
regarding the second point, I think jrgarcia who is the initial developer/founder kept it this way for it to be handled on client side because I can see the same kind of logic is being used in framework's docs as well.
Let me ask him in the the issue(#2470 ) conversation you raised.

for ref:

<Button isDisabled={list.isLoading} variant="flat" onPress={list.loadMore}>
  {list.isLoading && <Spinner color="white" size="sm" />}
  Load More
</Button>