If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Form Feedback & Loading States
While the basic form submission we covered in the previous section works well, professional applications require visual feedback to keep users informed during form processing. This page explores how to add loading indicators, manage form states, and provide clear feedback during submission.
The Need for Visual Feedback
When forms submit without page reloads, users need clear visual cues that something is happening. Without proper feedback, users might:
- Wonder if their click registered
- Click the submit button multiple times
- Navigate away thinking nothing happened
- Lose confidence in your application
Trongate MX provides several built-in solutions to address these concerns.
Automatic Form State Management
Even without additional configuration, Trongate MX automatically manages form states during submission:
When this form is submitted, Trongate MX automatically:
- Disables all form elements during submission to prevent double-submissions
- Re-enables elements once the response is received
- Clears validation errors from previous submissions before processing
- Resets the form after successful submissions
The list above does get slightly ahead of where we are, as this chapter hasn’t yet covered areas such as handling form validation errors. Not to worry - we'll be addressing everything very shortly.
Adding Loading Indicators
Loading indicators provide immediate visual feedback that a request is in progress. Here's how to make a simple spinner appear at the moment when a form has been submitted:
The mx-indicator attribute tells Trongate MX which element to show during the request. The spinner automatically appears when the form is submitted and disappears when the response arrives.
About the Spinner Class: The spinner class is part of Trongate's CSS and creates an animated loading indicator. The mx-indicator class ensures the spinner is properly initialized and hidden by default. No third-party libraries are required - everything works out of the box with trongate.css.
Custom Loading Messages
Instead of a spinner, you can display custom loading messages when forms are submitted:
About the Blink Class: The blink class is part of Trongate's CSS and provides a subtle animation that draws attention to the loading message. Like all Trongate CSS features, no third-party libraries are required.
Form Content During Submission
When you submit a form, using Trongate MX, all of the form fields are automatically disabled at the point of form submission. This means that, by default, form fields may appear greyed out while the submission is being processed.
You can, however, customise the visual feedback during submission using mx-target-loading:
Option 1: Cloaking the Form
With mx-target-loading="cloak", the form is hidden during submission, making further user interaction impossible and providing a clear visual indication that the submission is in progress.
Option 2: Replacing Form Content
With this approach, the form content is temporarily replaced by a custom element (in this case, a loading message). The value assigned to mx-target-loading should be a valid CSS selector, which allows you to show any element you like while the form is being submitted.
It's possible and acceptable to combine different feedback mechanisms. The example below replaces the form with a custom element and also renders a spinner element, at the moment of form submission.
Invoking Custom JavaScript Functions
Trongate MX also allows you to invoke custom JavaScript functions the instant a request is triggered. This can be achieved by using the mx-on-trigger attribute. The value of this attribute should be the name of the JavaScript function you'd to invoke.
The code sample below demonstrates how you could use mx-on-trigger to hide an entire section of a webpage, the moment that a button is pressed.
When the button is pressed, the following things would happen:
- An HTTP POST request would be sent to 'news_reporter/submit_generate_news_article'
- The POST request would contain a payload of
prompt_refwith a value of ABC123 - The entire paragraph that contains the button would be removed
- Thereafter, a spinner element would be dynamically rendered and added onto the page
In a real-use situation, you may wish to add additional custom JavaScript or use additional attributes, such as mx-after-swap to control what happens after a response, from the server, has been received.
Testing Loading States
During development, it's a good idea to test how loading states appear from the user's perspective. One simple way to do this is by adding a short, artificial delay to your controller methods. This can be easily achieved by using PHP's sleep() function. The code below demonstrates how to add a two second time delay before the server responds to a request:
Don’t Forget to Remove Testing Delays: The sleep() function is intended solely for development and testing. Be sure to remove it before going live to avoid frustrating delays for your users.
Best Practices for Form Feedback
Loading State Guidelines:
- Always provide some form of visual feedback for operations that take longer than 200ms
- Use descriptive loading messages that match the action being performed
- Place loading indicators close to the action that triggered them
- Ensure loading states are accessible with proper ARIA labels if needed
- Test loading states with artificial delays during development
Placement Tip: When using mx-indicator, place the loading element outside the form to ensure it remains visible even when form elements are disabled or hidden.
Summary
Trongate MX provides simple yet powerful tools for managing form state during submission. By using these features thoughtfully, you can create forms that feel responsive and keep users informed throughout the submission process.
Now, let's explore how to handle form validation and how to display errors gracefully within your dynamic forms. This documentation will cover:
- How to use HTML5's built-in form validation attributes
- How to use Trongate's Validation class with Trongate MX
Are you ready for some serious form validation action? Let's do it!