[BUG] - Table: specifying both emptyContent and loadingContent shows both of them while content is loading

[brunokc]

NextUI Version

2.2.9

Describe the bug

If I'm loading data dynamically, and use both loadingContent and emptyContent, NextUI seems to 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.

Tangential to this, you'll also notice that when there's no emptyContent defined and items is empty ([]), the loading element will be rendered on top of the columns. I think it's missing a minimum height in its definition.

Your Example Website or App

https://stackblitz.com/edit/nextui-table-bug

Steps to Reproduce the Bug or Issue

1. Use Table
2. Ensure isLoading is true
3. Ensure emptyContent is non-empty
4. Ensure items is an empty array ([])

Expected behavior

loadingContent and emptyContent should be mutually exclusive. While loadingContent is being rendered, emptyContent should not be used, and vice-versa.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Edge

[linear]

ENG-475 [BUG] - Table: specifying both emptyContent and loadingContent shows both of them while content is loading

[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 this discussion #2427 as answered, will really appreciate, thanks!

[brunokc]

Thank you @alphaxek. Yes, that helps, and I already used something like that. I would expect the framework to take care of that for me though.

[alphaxek]

Hi @jrgarciadev @tianenpang @wingkwong,

Is this issue supposed to be handled on client side or by framework itself?

[wingkwong]

IMO empty content and loader shouldn't be shown at the same time. @brunokc I've seen you changed something already. Can you make a PR?

[alphaxek]

@wingkwong yes correct both shouldn't be shown, but is it a client side issue or framework issue?

[wingkwong]

I think it should be handled by the framework. Users shouldn't add such logic themselves.

[alphaxek]

okay thanks for clearing, I think @brunokc already got a solution to it in nextui/packages/components/table/src/table-body.tsx, @brunokc can raise PR.

[brunokc]

Awesome, I'll work on that PR shortly. Thanks, everyone!

[alphaxek]

@brunokc If your query is resolved please mark as answered, will appreciate, thanks!

[brunokc]

Sorry for the delay. I ran into the other issue I mentioned where loadingContent is rendering wrong in the absence of emptyContent. I decided to change my fix to get things going, but I'll start a discussion in the PR to see how you guys think we should proceed.