Weekly Vue.js News

By Michael Hoffmann (Mokkapps)

Weekly Vue.js News - #50 - Delay Loading Appearance of Spinner

#50・
297

subscribers

54

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Weekly Vue.js News will receive your email address.

Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps)
Hi πŸ‘‹
Last weekend I got married πŸ’
In this issue, I have curated a few interesting articles and tips to help you in your journey to become a Vue expert.
Have a great week β˜€οΈ

Vue Tip: Delay Loading Appearance of Spinner
Eager delay spinners are not a good user experience as they can make a snappy user interface feel slower. We can provide a better user experience (UX) by delaying spinners to appear only after a perceivable delay.
To achieve this improved UX, you can use AsyncComponent.
Vue provides the defineAsyncComponent function to lazy load components:
defineAsyncComponent accepts a loader function that returns a Promise. The resolve callback should be called if the component has been loaded, and the reject callback to indicate that loading the component has failed.
Now let’s implement the delayed loading spinner by using the advanced options of the defineAsyncComponent function:
This demo simulates a network request to fetch HelloWorld.vue from a server which takes 2 seconds:
The loading component Loading.vue is shown after a delay of 500ms, defined with delay: 500.
You can try it yourself in this StackBlitz playground.
Vue News
HTML Tip: Specify wheter an element is draggable
Links and images are draggable by default.
The draggable attribute is often used in drag and drop operations.
Web Development News
Quote of the week
Tools & Misc
Did you enjoy this issue? Yes No
Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps) @mokkapps

Hi πŸ‘‹

My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.

I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice.

My weekly emails reflect this preference.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany