How to Add Skeleton Screens in Vue for Faster Perceived Load Times
This article explains the concept of skeleton screens, demonstrates how to use the CSS :empty selector, and provides a step‑by‑step Vue implementation—including route‑aware class switching—to reduce white‑screen time on slow networks.
What is a Skeleton Screen?
Skeleton screens are placeholder graphics that occupy the page layout while data loads, reducing perceived white‑screen time, especially on slow networks or delayed API responses.
CSS :empty Selector
The CSS pseudo‑class :empty matches elements that have no child nodes (including text nodes). It can be used to style empty ul elements or other containers.
Project Background
In the "car owner level rights" feature of Autohome, a new business was added to an existing project. The goal was to integrate a skeleton screen with minimal code changes, quick implementation before the deadline, and easy extensibility to other pages.
Ensure small changes that do not affect existing logic.
Implement a solution that can be completed before the deadline.
Make the solution extensible for other early‑stage pages.
Single‑Page Skeleton Implementation
Analysis of Vue's rendering process shows that public/index.html is rendered first; the element with id="app" is the mount point. By inserting a div class="skeleton-equity" inside the #app container, a placeholder can be shown until the Vue app mounts and removes it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.skeleton-equity {
height: 100vh;
background: url('//s.autoimg.cn/club/carport/m/img/skeleton-equity.png') no-repeat;
background-size: 100% auto;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- skeleton placeholder -->
<div class="skeleton-equity"></div>
</body>
</html>In the Vue component’s mounted() hook the placeholder is removed with remove('.skeleton-equity').
mounted() {
remove('.skeleton-equity');
},Routing‑Based Skeleton Switching
When navigating between pages, a static class name would cause the wrong placeholder to stay visible. By assigning each route a unique name and using the router’s afterEach hook, the placeholder’s class is updated to skeleton‑{routeName}, ensuring the correct skeleton appears for each view.
router.afterEach((to, from) => {
const $dom = document.querySelector(`.skeleton-${from.name}`) ||
document.querySelector('.skeleton-equity');
if ($dom) {
$dom.style.display = "block";
$dom.className = `skeleton-${to.name}`;
}
});Results
Under Chrome’s 3G throttling the skeleton screens fill the initial white‑screen period, both on first load and on route changes. On fast networks the effect is brief, but the technique improves perceived performance when network conditions are poor.
Conclusion
Many ways exist to add skeleton screens; the chosen approach balances minimal intrusion, quick delivery, and reusability across pages.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.