8 ms·

> It has ways to indicate "things are in flight" but for distant deployments you probably still need to write JS to manage some in-page elements for reasonable

> It has ways to indicate "things are in flight" but for distant deployments you probably still need to write JS to manage some in-page elements for reasonable feeling UX. Most JS UIs behave like this: open a list view, watch a spinner until data is fetched from the server. There is practically no difference between that and showing a spinner first and then the list.

bongobingo1 4y ago
Yes but my point is if you don't do anything in LV, you click the button and it sits there seemingly doing nothing, then patches the DOM with the update. Possibly the default "topbar" will show depending on its timeout configuration. So you need to pay some attention to applying-css/hooking-into-the-tooling (phx-click-loading) to show that a button was indeed clicked and is working on fetching data. Some things such as flipping between tabs can feel quite bad if you click and the tab-button just puts a spinner there or the button just "fades a bit". Its much nicer to replace the content pane with some mock-blocks to show "yes, the tab swapped and its loading data" which is where you need JS to temporarily hide/show some things. And once you start doing that you should really be measuring the avg rtt on the socket because showing the mock-content for 1ms then swapping the real content is also bad, so you need JS again to figure the best UX for that client. Or you simply render all the tabs in one go and again, duck into JS to perform the local show/hide.
- a_bored_husky 4y ago
  > which is where you need JS to temporarily hide/show some things You do not need to write that JS though. LiveView comes with a few helpers to assist in client-only features.
  - bongobingo1 4y ago
    I even wrote that in my original comment :)
- arcanemachiner 4y ago
  > And once you start doing that you should really be measuring the avg rtt on the socket because showing the mock-content for 1ms then swapping the real content is also bad, so you need JS again to figure the best UX for that client. I don't remember the exact circumstances from when I last dabbled with LiveView, but I recall that using a combination of CSS delay (so that fast connections wouldn't see a useless spinner) and an opacity transition style (to reduce jarring elements popping up suddenly) produced a nice effect, all with plain CSS and a phx-loading attribute.
lukevp 4y ago
There’s a big difference from a UX perspective between clicking a button and having nothing happen and clicking a button and seeing something immediately happen, regardless of how long the data takes to retrieve.

bongobingo1 4y ago

Yes but my point is if you don't do anything in LV, you click the button and it sits there seemingly doing nothing, then patches the DOM with the update. Possibly the default "topbar" will show depending on its timeout configuration. So you need to pay some attention to applying-css/hooking-into-the-tooling (phx-click-loading) to show that a button was indeed clicked and is working on fetching data. Some things such as flipping between tabs can feel quite bad if you click and the tab-button just puts a spinner there or the button just "fades a bit". Its much nicer to replace the content pane with some mock-blocks to show "yes, the tab swapped and its loading data" which is where you need JS to temporarily hide/show some things. And once you start doing that you should really be measuring the avg rtt on the socket because showing the mock-content for 1ms then swapping the real content is also bad, so you need JS again to figure the best UX for that client. Or you simply render all the tabs in one go and again, duck into JS to perform the local show/hide.

a_bored_husky 4y ago
> which is where you need JS to temporarily hide/show some things You do not need to write that JS though. LiveView comes with a few helpers to assist in client-only features.
- bongobingo1 4y ago
  I even wrote that in my original comment :)
arcanemachiner 4y ago
> And once you start doing that you should really be measuring the avg rtt on the socket because showing the mock-content for 1ms then swapping the real content is also bad, so you need JS again to figure the best UX for that client. I don't remember the exact circumstances from when I last dabbled with LiveView, but I recall that using a combination of CSS delay (so that fast connections wouldn't see a useless spinner) and an opacity transition style (to reduce jarring elements popping up suddenly) produced a nice effect, all with plain CSS and a phx-loading attribute.

lukevp 4y ago

There’s a big difference from a UX perspective between clicking a button and having nothing happen and clicking a button and seeing something immediately happen, regardless of how long the data takes to retrieve.