[3.x] Loading class in form theme is empty

[chrismlusk]

Describe the bug

Since upgrading to 3.x, I've noticed form submit buttons no longer have a loading spinner.

My project has quite a bit of form customizations, so this could be a me problem. I do have a custom form template with CSS disabled, but my own CSS has a styles applied to the .fui-loading class. This worked as expected in version 2.

I figured the class name might have changed, so I went to my browser console to inspect. When I dig into the formTheme object, I see the loadingClass is an empty array.

window.Formie.forms[0].formTheme.loadingClass

// prints `[]`

This matches what I see in my browser dev tools. I add a command to break when the submit button is modified, but the only change I see is a disabled attribute being set. No CSS changes.

I went source-code diving to see if I could find any clues, but nothing caught my eye.

Form settings

• Multi-page form: No
• Submission Method: (I tried both)
• Custom Form Templates: Yes

Craft CMS version

5.6.5.1

Plugin version

3.0.20

[engram-design]

We do add a fui-loading class to the submit button by default, but it depends on a few things.

Are you using Theme Config at all, and especially, are you using resetClasses?

It may well be related to a collection of config items we define but they aren't new to Formie 3.

[chrismlusk]

Ah, yes. I do have resetClasses set to true in the plugin config file. Removing that does restore fui-loading.

Since I'm not loading Formie's CSS in my own form template, I could probably stop using resetClasses and things should stay the same. I had reset mainly to clean things up and remove unused classes for clarity.

I guess something changed in Formie 3 so all classes now really means all? If that was intentional, maybe this issue is now a feature request to include those config items in Theme Config?

[engram-design]

Yeah, I've been trying to wrack my brain to understand why they aren't in Theme Config already, as from what I can tell, they should be. But I believe it was deliberate to really get rid of all classes, and include support for "special" classes we define for things that JS uses - like a loading class (we toggle the loading class you provide, rather than assuming fui-loading).

But in your case, I'd suggest we add those to Theme Config, and if you were using Formie's CSS, you could easily add back fui-loading, or, you'll need to provide your own loading Theme Config class, and associated CSS to add a loading spinner.

This also covers a few other JS-only classes, like client-side errors which now correctly match up to their server-side error counterparts.

So yep, let me finish up some testing, but from what I see so far, there's no reason not to include them.