Wails Indicator

[niklaavsk]

Hi,
A custom loading indicator would be nice as well, I added this to the wails-call function, to get there.

for (const triggerSpec of triggerSpecs) {
                api.addTriggerHandler(child, triggerSpec, nodeData, function () {
                    const indicatorID = api.getAttributeValue(child, "wails-indicator") ?? null;
                    if(indicatorID) {
                        document.getElementById(indicatorID.substring(1)).classList.add('htmx-request');
                    }

                    const results = api.getInputValues(child, 'POST')
                    const errors = results.errors
                    const rawParameters = results.values
                    const expressionVars = api.getExpressionVars(child)
                    const allParameters = api.mergeObjects(rawParameters, expressionVars)
                    const filteredParameters = api.filterValues(allParameters, child)
                    myMethod(filteredParameters).then((res) => {
                        if(indicatorID) {
                            document.getElementById(indicatorID.substring(1)).classList.remove('htmx-request');
                        }
                        
                        swap(child, res)
                    })
                })
            }

and then in my html :

                 <form wails-call="DisableNetworkAdapter" wails-indicator="#spinner">
                        <input type="hidden" name="AdapterName" value="VirtualBox Host-Only Network" readonly />
                        
                        <button type="submit">
                            <img id="spinner" class="htmx-indicator" src="https://htmx.org/img/bars.svg"/>
                            Clicky clicky
                        </button>
                    </form>

since CSS now allows transitions from display:none :

.htmx-indicator{
    display: none;
    animation: vanish 0.5s;
}
.htmx-request.htmx-indicator{
    display: inline;
    animation: appear 0.5s;
}
@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes vanish {
   from {
       display: inline;
       opacity: 1;
   }
   to {
        display: none;
        opacity: 0;
   }
}