UI/UX: The "moving" Apply button (Layout shift)

[iorx]

Hi everyone,

To start with, OPNsense is awesome! After years of procrastination, I finally migrated from pfSense to a fully "pimped" OPNsense setup. From DNS redirects, DoH blocking, multi-site WireGuard, 6 VLANs, working forward and reverse lookups. It has been a blast to configure!

What I noticed. It's a "luxury problem":
The Apply button! Hitting a moving target is... 😁
Currently, when the notification banner appears to remind you to apply changes, it causes a layout shift. This means the Apply button moves just as you are about to click it. I think this may improve the experience while, as I've done, work intensively in the UI.

And, some times I had unapplied settings. Maybe a notification at the top that there are lingerings stuff that needs an Apply?

FI: Mainly using Firefox, but same-same behavior in Edge.

Brgs!

[passeri]

As with the lack of warning about changes, the Apply button is also apparently live when no changes have been made.

[keeka]

There are times when you might want to apply the config regardless. IMO it's preferable to keep the button enabled even when the system deems it unnecessary.

[Monviech (Cedrik)]

Funnily its being worked on right now:

https://github.com/opnsense/core/pull/10103
https://github.com/opnsense/core/issues/10230

A lingering banner is not on the list though, since that would need to keep track of a dirty or clean system state.

I removed some of that assumed system state cruft e.g. in monit:
https://github.com/opnsense/core/pull/8894
https://github.com/opnsense/core/pull/8883

[franco]

> A lingering banner is not on the list though, since that would need to keep track of a dirty or clean system state.

The apply message and colour will now linger actually, but not across page loads.  But it is being considered for a future improvement.


Cheers,
Franco

[iorx]

Awesome!

And such responsiveness here, KUDOS!

I had a go at the source to check what I could find, but with limited knowledge I gave in... Had a small idea to contribute with more than just "the Apply button is moving, please fix" 😁

Keep up the amazing work!

[franco]

Thanks, it's actually a bit of a rabbit hole.  I ended up improving the IPsec connections page as it needed more attention for this particular topic and in general. Maybe someone will find it useful too.  :)


Cheers,
Franco