Shopify Question posted in
The Shopify help center can be found here.

Render a loader page while continuing the request – Shopify

I am currently developing an application that is using nodejs and ejs along with the shopify api. I wanted to know if there is a way by which we can render a spinner/loader on the screen while the request gets completed.

I mean something like:

app.get('/', (req, res) => {
  res.render('loader');
  // continue the api authentication
});

is there any possible way to do so.

Tags:

2

Answers


  1. 0

    As soon as you call res.render() , the request will finish.

    First of all you cannot use code on the backend to dynamically change content on your frontend , if you are not using xhr, fetch, axios etc.

    So in your use case what you can do is, do a GET request at ‘/’ route using the DOM fetch api or any library you want. The code might look as follows.

    const getData = async () => {
   showloader()
   const data = await fetch('/).then(res => res.json())
   hideLoader()
}

    On the backend just execute the authentication logic and send back the authentication status, after the client recieves the data you can worry about handling the DOM accordingly.

    Login or Signup to reply.
  2. 0

    I see you are using server side rendering, which returns html to be shown on server itself.

    Showing spinner is only possible on already loaded UI where subsequent requests only get data and insert it back on your UI. As you have the page already loaded
    you can start and stop showing a loader on your screen.

    If you are trying to load completely a new page in you request it wont be possible.

    Solutions :

    1) Use a SPA architecture.
    2) From your node server return the compiled html from server as a response to ajax request and insert it by yourself on UI, that way you have an already loaded page where you can show a spinner. You will have to get compiled html on server itself and send back html as encoded string, decode it back on UI and insert.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search