Forem

Cover image for Vue Quick Shot - Using a Loading Message
Raymond Camden
Raymond Camden

Posted on • Originally published at raymondcamden.com on

Vue Quick Shot - Using a Loading Message

Well, my grand plan to do one blog post per day of Vue quick tips failed rather quickly, but I can get two out today and get back on track. Honest, I can. While I wasn't planning on making every tip link to the previous one, my first two tips do exactly that.

My first tip explained how to disable a submit button while you waited for an Ajax call to finish. (Or any async call, and I actually used window.setTimeout instead of Ajax.) Today's tip builds on that by adding a rather simple, but helpful, modification - a loading message.

In the previous example, when you hit the submit button I disabled it while we waited for the result. You can see that in the CodePen below.

While the disabled button lets the user know something is going on, it would be nice to be a bit more obvious. First, let's add a new conditional div to the layout:

<div id="app" v-cloak>
  <form @submit.prevent="doSearch">
    <input type="search" v-model="term" placeholder="Search">
    <input type="submit" value="Perform Search" :disabled="searchDisabled">
  </form>

  <div v-if="searching">
    <p><i>Please stand by, I'm searching...</i></p>
  </div>

  <div v-if="result">
  <p>
    <b>The result: </b>
  </p>
  </div>
</div>

Enter fullscreen mode Exit fullscreen mode

Right in the middle you can see a new condition, v-if="searching" and a message inside. You could also generate an Ajax loader if you want...

Ajax loader

I then tweaked my JavaScript a little bit:

Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el:'#app',
  data: {
    term:'',
    result:'',
    searchDisabled:false,
    searching:false
  },
  methods:{
    async doSearch() {
     if(this.term === '') return; 
     console.log(`search for ${this.term}`);
     //disable the button
     this.searchDisabled = true;
     // clear previous result
     this.result = '';
     this.searching = true;
     this.result = await searchMyAPI(this.term);
     //re-enable the button
     this.searchDisabled = false;
     this.searching = false;
    }
  }
})

async function searchMyAPI(s) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(`something for ${s}`);
    }, 3000);
  });
}

Enter fullscreen mode Exit fullscreen mode

I added a default value for searching and within doSearch, I set it to true before the search and back to false after. Here's a CodePen you can test with:

That's it for this tip. I'll have the next one up later today, and hopefully, one more for Thursday and Friday. Enjoy!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (2)

Collapse
 
tirtakeniten profile image
Tirta Keniten

Hi Raymond, nice article. I was using loading message nor animation to tell user that the data is still loading. But since I saw Facebook is using content placeholder, I started to experiment with it and it turned quite beautiful. This is the package github.com/michalsnik/vue-content-.... Enjoy

Collapse
 
raymondcamden profile image
Raymond Camden

That's dang nice!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay