{{define "skeleton-loader"}}
<!-- Skeleton Loader Overlay - Shown during language transitions -->
<div id="skeleton-loader">
    <div class="skeleton-container">
        <!-- Skeleton Page 1 -->
        <div class="skeleton-page">
            <!-- Header skeleton -->
            <div class="skeleton skeleton-header"></div>

            <!-- Badges skeleton -->
            <div class="skeleton skeleton-badges"></div>

            <!-- Grid layout with sidebars -->
            <div class="skeleton-grid">
                <!-- Left sidebar skeleton -->
                <div class="skeleton-sidebar">
                    <div class="skeleton skeleton-sidebar-item"></div>
                    <div class="skeleton skeleton-sidebar-item"></div>
                    <div class="skeleton skeleton-sidebar-item"></div>
                    <div class="skeleton skeleton-sidebar-item"></div>
                </div>

                <!-- Main content skeleton -->
                <div class="skeleton-main">
                    <!-- Section 1 -->
                    <div class="skeleton-section">
                        <div class="skeleton skeleton-title"></div>
                        <div class="skeleton skeleton-content long"></div>
                        <div class="skeleton skeleton-content medium"></div>
                        <div class="skeleton skeleton-content short"></div>
                    </div>

                    <!-- Section 2 -->
                    <div class="skeleton-section">
                        <div class="skeleton skeleton-title"></div>
                        <div class="skeleton skeleton-content medium"></div>
                        <div class="skeleton skeleton-content long"></div>
                    </div>

                    <!-- Experience items -->
                    <div class="skeleton-section">
                        <div class="skeleton skeleton-title"></div>
                        <div class="skeleton skeleton-experience-item"></div>
                        <div class="skeleton skeleton-experience-item"></div>
                        <div class="skeleton skeleton-experience-item"></div>
                    </div>
                </div>

                <!-- Right sidebar skeleton -->
                <div class="skeleton-sidebar">
                    <div class="skeleton skeleton-sidebar-item"></div>
                    <div class="skeleton skeleton-sidebar-item"></div>
                    <div class="skeleton skeleton-sidebar-item"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}