search

OpenFn / lightning

OpenFn/Lightning ⚡️ is the newest version of the OpenFn DPG and provides a web UI to visually manage complex workflow automation projects.
https://openfn.github.io/lightning/
GNU Lesser General Public License v3.0
115 stars 31 forks source link

Standardize button styles and behaviour #2212

Open christad92 opened 1 week ago

christad92 commented 1 week ago

We need to standardize buttons, styles, and behavior on Lightning and Thunderbolt. This helps to deliver consistency and eliminate bounces/flashes experienced when buttons are pressed on the app. See below for an example of how varying save buttons cause a bounce effect.

https://www.loom.com/share/58feb3af170a42fdbe70a127843bb7cb

PrisionMikeLime commented 3 days ago

Hi, I would like to contribute, and this looks like a great first issue. What is the expected behavior then? Its not FOUC in this case, it's because we receive the response so fast that the button flickers with Saving... information. What is the expected solution for this problem? Also, what is thunderbold?

christad92 commented 1 day ago

Hi, I would like to contribute, and this looks like a great first issue. What is the expected behavior then? Its not FOUC in this case, it's because we receive the response so fast that the button flickers with Saving... information. What is the expected solution for this problem? Also, what is thunderbold?

Hi @PrisionMikeLime, thank you for your interest in this issue.

You're right that this is not FOUC rather it is a collapse and reload effect when the button is pressed because the Save button has a smaller width compared to when the button says Saving.... The objective of this issue is that these buttons have the same width.

Sidenote: Thunderbolt is the billing module for OpenFn and this issue is not dependent on thunderbolt.