Materialize: Feature suggestion : Loading button

[storm1er]

TL;DR

Have Component:loading-btn which display a loading animation in it, +transition with existing btn stuff.
_Think it's a good idea ? add :+1:
Thanks ;)_

---

Expected Behavior

I would like to see this kind of button :

See https://github.com/Dogfalo/materialize/pull/4942 for more

UseCase

• In a form
• You click a normal button
• By adding class is-loading to it, it displays a loading animation
• Plus disabling button action, avoiding multi-submit & stuff
• Do your async/ajax/WTFYouWant
• Delete is-loading class and YaY it's done

Material compliance

• Well, nothing is clearly stated about button & their motion
• But it's stay compliant if we respect these motion rules

Current Behavior

• Well there is no loading btn for the moment
• We could edit the content of a button with mini preloader but it's not really a good solution as you need to edit DOM and too much stuff on html/css part of things.

Possible Solution

Testable in this fork

[Dogfalo]

I would say initially that this seems a bit unnecessary but if we see people continuously ask for this, we'll consider it.

Will reopen this for now for visibility

[storm1er]

@Dogfalo ok :)
I actually need this in my project.
Too much async stuff, and nothing in materialize can handle those scenarios without too much dev.
So I'll work on it anyway ;)

[bert-w]

https://jsfiddle.net/tbsgvn6z/

<button class="red btn waves-effect">
  <div class="preloader-wrapper small active">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</button>

I know its not perfect, but with some css additions this can probably be fixed without re-creating existing components. spinner-white-only would be handy though

[storm1er]

@bert-w that's precisely what i want to avoid : DOM manipulation just for a loading animation feels really heavy.
BTW, I already told this in current behavior ^^'

[bassie1995]

I think this could be a pretty nice addition to make something that fits within Materialize well, but am currently using Ladda: https://github.com/hakimel/Ladda.

You can use the non-styled buttons and apply Materialize classes to make them look like Materialize buttons, but with the loading indicators.

[storm1er]

@bassie1995 Oh ^^
I'm just wondering why not implement Ladda in our framework ?
All those loading button are great and use-able easily.

Contract-overlay button is neat for submitting form without manually disabling every input & select.

Or i'll just implement overlay capabilities on my fork ...

EDIT : I did the overlay stuff, way more simple with observer =)

EDIT2 : I tried Ladda, I think there is too much stuff. A simple loading feedback as I did is less complicate to understand & apply them to any project is easier than Ladda. Loading is already implement in Materialize and make them appear on button doesn't seems to be a good idea to me.
People will still be able to add Ladda to their project for specific needs tho.

[Zerebokep]

Materialize definitely needs a loading button, I always wondered why there isn't one.

[Dogfalo]

See my comment over at #4942

[jpic]

Thanks a heap for your advice @Dogfalo keep up the great work !

[michelvd]

I would say initially that this seems a bit unnecessary but if we see people continuously ask for this, we'll consider it.

I've never been on a project the last 10 years which didn't have a spinner-on-a-button. It is done on every action which might take some time ie a call to the server. Must have IMO