Extra table renderings when there is nothing (tabs History, NFTS)

[isopen]

Bug Type

UI/UX

Reproduction steps

vokoscreenNG-2022-09-21_05-13-27.webm

Actual result

Extra table renderings when there is nothing.
When loading tabs, extra tables appear and immediately disappear. (tabs: History, NFTS)

Expected result

In serious applications, this should not work.
Fix the application life cycle (False table views should not flicker)

Suggested Severity

Critical

Device

Desktop (please complete the following information):

• OS: Ubuntu 22
• Browser Google Chrome
• Version 105.0.5195.52

Additional Context

No response

[ingria]

I can't see how application lifecycle has something to do with this error.

Dupe #41

[isopen]

I can't see how application lifecycle has something to do with this error.

Dupe #41

@ingria This is not a duplicate of #41.

Extra table renders when there is nothing!
Please watch the video. This is due to the content rendering queue in the application.
It's not about the division of contracts. Which still doesn't work!

1. Why are you correcting the title of the ticket? I liked the past better.
2. Why are you in a hurry to close the ticket without understanding it?

[ingria]

This is called “preloader” or “skeleton” and it indicates that the app is loading data. Skeleton is always shown until the ajax request resolves (either with error or with data).

The only problem that I see here is that skeleton doesn’t disappear on inactive address “contract” tab because of api error.

I’ve changed the title because this problem has nothing to do with application lifecycle. If you think I’m wrong, please explain where exactly in the lifecycle there’s an error.

[isopen]

@ingria Thanks. Your comment is great.

1. In the case of an ajax request, you can first get the data.
2. In the process of receiving data, show the loader.
3. Draw the table itself along with the data.

This strategy should ensure that the view is visually static.
An example can be viewed in TON DNS when searching domain (https://dns.ton.org/#test123).

Sorry, I wrote badly about the life cycle. You can formulate this as the life cycle of the query and display of data.

[ingria]

"Skeleton" is just another type of loader. It is not rotating and round, yet it is still some entity indicating that the data is loading.

Unfortunately, displaying round spinning loader is not an option, because every page loads data from several different places (APIs). Some data is fast to fetch (like balance), some is slow (like contract type). Notice, how different "skeletons" take different amount of time to load:

example1.mp4

Displaying many spinning loaders would not look nice. Also, for the same reason we cannot display one big loader and wait until all data on the page is loaded - it would take too much time. Better display piece of info when it's ready, right away.

[isopen]

You can try to make a loader for the first start of the table. I considered the case of the first entry to the page (the case of reloading the page on the browser button).
This can reduce flickering when the table is first started?