fix: render Ordertab only when it is active

[Abhishek-17h]

• I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
• I verified there aren't other open pull requests for the same change.
• I followed the guidelines in Contributing to Volto.
• I succesfully ran code linting checks on my changes locally.
• [x]I succesfully ran unit tests on my changes locally.
• I succesfully ran acceptance tests on my changes locally.
• If needed, I added new tests for my changes.
• If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
• I included a change log entry in my commits.

---

The video showcases the behavior after the fix:
Screencast from 2025-01-13 09-17-05.webm

Closes #6492

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	df5b566
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/678e6ac79609d4000973cf7a

[Abhishek-17h]

@stevepiercy @ichim-david @davisagli Please provide review.

[stevepiercy]

Minor change in the change log entry.

[stevepiercy]

Suggested change

	You can now render the order side panel only when the 'Order' tab is active. Previously, the panel would render unnecessarily even when not active.@Abhishek-17h
	The Order side panel now renders only when the "Order" tab is active. Previously, the panel would render unnecessarily even when inactive. @Abhishek-17h

[stevepiercy]

This is a nice step forward. Thanks for your work on this.

In the video, I noticed two things that I'd like to ask for opinions from the members of both the @plone/volto-accessibility and @plone/volto-team. Please don't make changes yet, but let's get some feedback.

1. When the Order tab gets activated, there is a slight delay of about a half-second with a "no entry" icon 🚫 displayed. Should that be changed to a "Loading" icon? When editing a page or control panel, then click Save, I see the loading class injected into the Save button and a grey spinning circular line.
2. I don't think the Order list items should unload when the Order tab gets deactivated after it was active one time. I think it should remain loaded, but hidden. That will eliminate second and subsequent reloads while editing a given page.

[Abhishek-17h]

Thank you, @stevepiercy, for your suggestions.

I completely agree with your first suggestion regarding replacing the icon 🚫 with a "Loading" icon. In fact, I had initially considered implementing this change before raising the PR but decided to keep the existing behavior to gather feedback from the Volto team and accessibility experts. It's great to see that you noticed it too, as it reinforces the need for improvement in this area.

Regarding your second suggestion, I think it’s a great idea, but I am concerned that its implementation might conflict with the main issue being addressed.

Looking forward to hearing more thoughts from the Volto team and accessibility members on these points!

[Abhishek-17h]

@ichim-david please provide review on this.

[ichim-david]

@Abhishek-17h technically speaking what you did is what I've asked.

The problem is that the UX isn't very good as it takes a long time to load even locally with a very fast MacBook pro.
I made a video where I compared the before and after and mentioned a few things that I would still play with.
https://www.youtube.com/watch?v=IFaCNBAGshE
The TLDR is:

• we need a loading indicator as that round circle cut in half is the icon usually used to denote that the block doesn't have any block options.

See if you can introduce a loader to give some info to the user that the panel is loading. I would also try to look at the logic of the component and try to understand why it takes so long to load and if there is anything that can be done to speed it up.

If we were to simply merge this change it would be a degradation of service of the order tab for the editor on account on having to wait so long to interact with it, especially on second time interactions on the same page.

[Abhishek-17h]

@ichim-david, I have watched your testing video and truly appreciate the time you took to explain everything in detail. I will implement the things you mentioned. Thank you for your guidance!

[Abhishek-17h]

@ichim-david have a look now.
Made two changes:
1)Added loader svg for order tab instead of forbidden svg and please check size of loader as I declared size which looked perfect to me.
2)Order tab now renders on first time and remain rendered .By doing this user don't have to wait every time for order tab to render and it is better than previous behaviour.

Ref Video:
Screencast from 2025-01-19 19-07-13.webm

I don't think we can speed up the rendering of the order tab if we only want to render it when it's active. I've tried many things but haven't had any success.
The changes that I made looks best to me than existing one.
Waiting for your response.

[Abhishek-17h]

@stevepiercy give your feedback also on this.

[stevepiercy]

The animated loading icon looks much better.

There are two rendering times: (1) that which the user perceives, and (2) that which is the actual render time after the page is loaded in edit mode, and then the editor clicks the Order tab.

To reduce option 1 time, we can pre-load option 2. But that would defeat the purpose of this PR and original issue.

I have no idea how to improve option 2. Its slow render time only became apparent after work on this PR was started.

At this point, we have a trade-off between either having a quick initial Order tab experience or waiting to initially render the Order tab only when it's active. I don't see the advantage of degrading the editor experience.

@ichim-david what is the actual problem with rendering the Order tab when it is not active? Yes, it shows up in Developer Tools, but why is that a bad thing?

[sneridagh]

@ichim-david honestly, do you think that this is the way of fixing this one, or we should look into a much deeper fix, fixing the updates on components as we talked some time ago? Maybe we should also put @robgietema in the loop.