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.
Target Element Control
The mx-target-loading attribute lets you control how target elements behave during HTTP requests. You can either temporarily hide elements or swap their content with loading messages while waiting for the server to respond.
Usage
Here's a simple example showing how to use the mx-target-loading attribute:
In this example, when the button is clicked the content inside the result div will temporarily disappear while new data is being fetched. Once the request completes, the new content will appear.
You can achieve the same result, using pure HTML, with the following code:
Use the style of syntax that you like best!
Two Ways to Handle Loading States
1. Hiding Content (Cloaking)
Here's how the same result can be achieved using pure HTML:
Using cloak temporarily hides the target element while the request is in progress. This is perfect for hiding forms when an HTTP request has been invoked.
2. Showing a Loading Message
This approach replaces the target's content with a loading message during the request. Once the request completes, the new content replaces the loading message.
Here's a pure HTML example that accomplishes the same goal:
PHP is extremely fast! When testing this kind of functionality, it's advisable to use PHP's in-built sleep() function - on your API endpoints. Doing so, provides an opportunity to clearly see if your application is behaving as expected during HTTP requests.
Here's an example of how you could use PHP's sleep() function to force an API endpoint to wait two seconds before responding to a request:
Important Implementation Notes
1. Hiding Placeholders
Always hide placeholder elements using style="display: none":
Correct:
Incorrect:
2. Placeholder Content Structure
When using placeholders, remember that only the inner HTML is transferred:
Correct:
Incorrect:
When using Trongate CSS, any content that is contained within an element with a class of 'blink' will alternately fade in and out with a smooth easing effect, creating a blinking animation that repeats infinitely. Here's an example of a paragraph that has a class of 'blink' applied:
I'm having a blinking good time!
Understanding The CSS
The above is achieved with the following code:
The CSS class of 'text-center' aligns the text to the center of the containing element. The CSS class of 'blink' makes the text fade in and out infinitely.
IMPORTANT NOTE: In HTML, it's perfectly acceptable to stack multiplate CSS class names on one element like so;
Using Target Control with Out-of-Band Swaps
When you combine mx-target-loading with mx-select-oob and mx-target="none", you can create sophisticated loading patterns that update multiple elements while providing visual feedback.
In this example, the container element uses mx-target="none" to indicate that it shouldn't be updated directly. Instead, the OOB swaps update the individual panels while each panel displays a spinner until its content loads.
This pattern is particularly useful for dashboards, real-time updates, and polling scenarios where you need to update multiple elements independently while maintaining a clean user experience.
Conclusion
The mx-target-loading attribute in Trongate MX provides a means of controlling the target element during an HTTP request. During an HTTP request, the mx-target-loading attribute can:
- Swap in the inner contents of the target element.
- Hide the target element entirely.
Since the attribute has a swapping capability, it has been added onto this chapter which has the title, 'Swapping Content'. However, it's worth noting that Trongate MX has a variety of other attributes that can be used to control application appearance during HTTP requests. More details regarding those other attributes can be found in this chapter and also in the Trongate MX Attribute Reference.