How to achieve skeleton loading?

Need Help
#1

I have seen many website that uses skeleton loading to load data into frame and know that this can achieve using CSS and API ? If that is the case I copied this API sample from Octobercms ‘Building API Endpoints’ into project/post.htm and preview the project post sample which display the data in text

{% if post %}
    {% do response({
        data: post
    }) %}
{% else %}
    {% do abort(404) %}
{% endif %}

Can anyone point me the direction to how I can structure that plain text into pretty html + css card? Do I need to have REACT or VUE as frontend to pull data from Octobercms to achieve Skeleton loading that I am looking for?

#2

Maybe what you want to do is capture output to a variable, then include it as a response. The placeholder documentation may be useful here:

Here is an example:

{% put prettycontent %}
    <p><a href="/services">Services</a></p>
{% endput %}

{% if post %}
    {% do response({
        data: placeholder('prettycontent')
    }) %}
{% else %}
    {% do abort(404) %}
{% endif %}