Skeleton screens are visual placeholders that display during a page's initial load phase. Unlike typical loading indicators that respond to specific operations like API requests, skeleton screens are used specifically for the first render before the actual content is available.

Implementation centers on creating skeleton components and conditionally displaying them until data is ready. The process envolves two main phases: constructing the skeleton component and integrating it into the application.

Creating Skeleton Components

Custom CSS Implementation

Skeleton components are primarily built with CSS animations. Below are alternative examples:

@keyframes pulse-loading {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

.skeleton-item {
    background-color: #e0e0e0;
    animation: pulse-loading 800ms ease-in-out infinite alternate;
}

@keyframes shimmer {
    from {
        background-position-x: 150%;
    }
    to {
        background-position-x: -50%;
    }
}

.loader-shimmer {
    animation: shimmer 1.8s linear infinite;
    background: linear-gradient(
        90deg,
        #ededed,
        #ededed 45%,
        #f7f7f7 50%,
        #ededed 55%,
        #ededed
    );
    background-size: 150% 100%;
}

Utilizing Vue Content Loader

The vue-content-loader library offers pre-built skeleton components for direct use.

npm install vue-content-loader --save

import {
    ContentLoader,
    FacebookLoader,
    CodeLoader,
    BulletListLoader,
    InstagramLoader,
    ListLoader
} from 'vue-content-loader'

export default {
    name: 'MyComponent',
    components: {
        ContentLoader
    }
}

Integrating Skeleton Screens

Direct Component Insertion

This approach involves placing the skeleton component directly within the Vue template, controlling its visibility with a data property.

Using SkeletonWebpackPlugin

Single-Page Application Setup

• vue.config.js

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
const path = require('path');

module.exports = {
    configureWebpack: (config) => {
        config.plugins.push(
            new SkeletonWebpackPlugin({
                webpackConfig: {
                    entry: {
                        skeleton: path.resolve(__dirname, 'src/skeleton/skeleton-main.js'),
                    },
                },
                minimize: true,
                quiet: true,
            })
        );
    }
}

• src/skeleton/skeleton-main.js

import Vue from 'vue';
import MainSkeleton from './MainSkeleton.vue';

export default new Vue({
    render: h => h(MainSkeleton)
});

• src/skeleton/MainSkeleton.vue: Contains the skeleton component for the main view.

Multi-Page Application Setup

• vue.config.js

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
const path = require('path');

module.exports = {
    configureWebpack: {
        plugins: [
            new SkeletonWebpackPlugin({
                webpackConfig: {
                    entry: {
                        skeleton: path.join(__dirname, './src/skeleton/skeleton-router.js'),
                    },
                },
                minimize: true,
                quiet: true,
                router: {
                    mode: 'hash',
                    routes: [
                        {
                            path: '/profile',
                            skeletonId: 'profileSkeleton'
                        },
                        {
                            path: '/dashboard',
                            skeletonId: 'dashboardSkeleton'
                        },
                    ]
                }
            })
        ]
    }
}

• src/skeleton/skeleton-router.js

import Vue from 'vue';
import ProfileSkeleton from '@/skeleton/ProfileSkeleton.vue';
import DashboardSkeleton from '@/skeleton/DashboardSkeleton.vue';

export default new Vue({
    components: {
        ProfileSkeleton,
        DashboardSkeleton
    },
    template: `
        <div>
            <profile-skeleton id="profileSkeleton" style="display: none;" />
            <dashboard-skeleton id="dashboardSkeleton" style="display: none;" />
        </div>
    `
});