File size: 2,109 Bytes
8b7b267 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/**
* Loading States Component
* Provides loading spinners and skeleton screens
*/
export class Loading {
/**
* Show loading spinner in container
*/
static show(containerId, message = 'Loading...') {
const container = document.getElementById(containerId);
if (!container) {
console.warn(`[Loading] Container not found: ${containerId}`);
return;
}
const spinner = document.createElement('div');
spinner.className = 'loading-container';
spinner.innerHTML = `
<div class="spinner"></div>
<p class="loading-text">${message}</p>
`;
container.innerHTML = '';
container.appendChild(spinner);
}
/**
* Hide loading spinner
*/
static hide(containerId) {
const container = document.getElementById(containerId);
if (!container) return;
const spinner = container.querySelector('.loading-container');
if (spinner) {
spinner.remove();
}
}
/**
* Generate skeleton rows for tables
*/
static skeletonRows(count = 5, columns = 5) {
let html = '';
for (let i = 0; i < count; i++) {
html += '<tr class="skeleton-row">';
for (let j = 0; j < columns; j++) {
html += '<td><div class="skeleton-box"></div></td>';
}
html += '</tr>';
}
return html;
}
/**
* Generate skeleton cards
*/
static skeletonCards(count = 4) {
let html = '';
for (let i = 0; i < count; i++) {
html += `
<div class="skeleton-card">
<div class="skeleton-box skeleton-title"></div>
<div class="skeleton-box skeleton-text"></div>
<div class="skeleton-box skeleton-text"></div>
</div>
`;
}
return html;
}
/**
* Add skeleton class to elements
*/
static addSkeleton(selector) {
document.querySelectorAll(selector).forEach(el => {
el.classList.add('skeleton');
});
}
/**
* Remove skeleton class
*/
static removeSkeleton(selector) {
document.querySelectorAll(selector).forEach(el => {
el.classList.remove('skeleton');
});
}
}
export default Loading;
|