Redesigned Workflow & Dashboard - Progress indicators

[jardakotesovec]

Updated 4th January 2025

Following updated mockups - https://www.figma.com/design/Wf7sDlUg2372jaKKTJ0Mgz/OJS-3.4-3.5?node-id=11145-13971&t=50egg7S9VOc9AKbX-4

Has not updated the animation according to the mock-ups as the previous ones seems similar enough - but could be improved separately in future.

Dashboard (submission listing)

• indicates whenever listing is being re-fetched for any reason

Workflow page

• indicates when any of the components inside workflow page are fetching/refetching data
• Just to note from technical point of view that currently the workflow page reload (on background) quite often all the data on background to ensure that any changes that would affect any other part of the UI (statuses, notifications, ...) will show up to date information. Hitting these endpoint should be relatively lightweight - will consider reducing these reloads for scenarios when no editing actions were taken. But even in these cases when nothing was changed by current user - it still might be useful to reload data in case these were changed by other user.

Create new version

This has been originally handled with full screen indicator - I think to emphasis magnitude of this action. I lean towards consistency here, where we indicate the progress in the confirming modal as you can see on screenshot. But let me know if the full scree indicator would be important here and I will adjust that.

[Devika008]

Hi Jarda,

I hope you can bear with me as I throw a few changes your way—I promise I’ve thought this through! 😄

Dashboard (submission listing)

Indicates whenever listing is being re-fetched for any reason

We shouldn’t place loaders next to "Filters" as it implies that a change or reset has been made to the filters, which could be misleading. Additionally, the placement is too small to notice that something is being loaded. To ensure clarity and consistency, I had proposed placing the loaders at the top.
To reduce user anxiety, we should also accompany the loaders with text, as loaders can sometimes appear endless in certain cases or installations.

Link: https://youtu.be/jOBjaAzL2kY

Workflow Page

indicates when any of the components inside workflow page are fetching/refetching data

Rule of thumb is that loaders need to always be placed on the top unless a specific section like just the document tables is being changed. We shouldnt be placing there as it breaks the UX logic of loaders in general. Again to reduce user anxiety, we should also accompany the loaders with text, as loaders can sometimes appear endless in certain cases or installations.

Link: https://youtu.be/mr4rlHvbZVE

The full-page loaders work well, but I strongly recommend accompanying them with text. Leaving them as endless loaders isn’t a best practice and can create unnecessary confusion or frustration for users.

[Tribunal33]

@jardakotesovec looks like this was assigned to me but is it ready for testing? I couldn't trigger the progress indicator commments indicated on the figma designs. I checked the code for the comments as throttling and setting breakpoints didn't reveal these progress indicator comments at the first 15, 15-30, and 30+ second mark. :
"Loading please wait..."
"Still loading, but almost there..."
"Thanks for your patience, we're still processing your data..."

Let me know if there are better ways to test these progress indicators. The code is too efficient to trigger them :).

[jardakotesovec]

@Tribunal33 These are from earlier designs, sorry for confusion. Its simplified now, so we don't use these texts. I think its updated on figma as well. The videos above our outdated.

[Tribunal33]

@jardakotesovec I don't know if this is in scope but I noticed that the exporting of users progress indicator never ends.

There really aren't many steps to reproduce.
Go to Tools -> Users XML Plugin -> Export Users -> Select some users -> Export users

File downloads to broswser but the progress indicator never stops spinning. I found it when testing the security issue with importing admin user role_ids.

If it is out of scope I could write up a bug for it to be fixed later too.

[jardakotesovec]

@Tribunal33 Yes that would be out of scope.. what I have done on workflow/dashboard should not interfere with progress bars elsewhere.

[Tribunal33]

@jardakotesovec thanks. I created a bug for it #10801 . This ticket passes QA.

Test Case Overview (edit was wrong tests)

1. Try different views from side navigation
2. Try opening up a submission and changing the workflow side navigation
   a. Should see “Refreshing Data” text as well as animation icon
3. Try creating a new version of a published submission
   a. There will be a popup with progress animation
4. Create a new submission and each stage should have progress indicator
   a. Final stage popup window is part of original requirement designs but other loading animations were seen throughout the process.