/    Sign up×
Community /Pin to ProfileBookmark

How can add a loading spinner in my protected route?

Hi
I want to know how to add a loading spinner in my protected route. Please help me if anyone know this. It’s a JavaScript problem.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@KevinGrennansondraMay 12.2022 —  I am working on a project that has a Flask backend and using jinja2 templates, I have routes where each route is a different database query using mongoDB. one of my queries takes 30 seconds. How can I display a load message/spinner during this? I could not find anything online. I know people say ajax, but I am not sure if that is what I need as how does it know when my backend queries are done. Thanks in advance.
Copy linkTweet thisAlerts:
@SempervivumMay 12.2022 — @KevinGrennansondra#1644005
>I know people say ajax

I agree, that would be a good approach.

>how does it know when my backend queries are done

When using ajax, the request is sent to the server and (after 30 seconds in your case) when the response from the server has arrived, a callback function is called where you can make your load message invisible.

Take a look at this demo:
``<i>
</i> // Make load message visible before sending request to server.

// Create new FormData-Objekt:
const params = new FormData();
// ... append parameters:
params.append('param1', 'some-param');
params.append('param2', 'some-other-param');
params.append('numparam', '1.24');
// Send request to server using method post:
fetch('testpost.php', {
method: 'post',
body: params
}).then(res =&gt; {
// Response from server has arrived,
// Use response as text:
return res.text();
}).then(res =&gt; {
// Output response:
console.log(res);
// In this place you can make your load message invisible
});<i>

</i>
``
×

Success!

Help @CarolBrusteredman spread the word by sharing this article on Twitter...

Tweet This
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...