feat(biochem): skeleton loaders for async fetches
Replace plain "Загрузка..." placeholders with shimmer-animated skeletons matching the actual layout shape: - library: 12 placeholder cards (canvas + 2 lines) - reactions: 6 row skeletons (stripe + title + 2 text lines) - properties: 10 sidebar row shimmers (thumb + 2 lines) - biochem editor: 4-5 row skeletons for saved-molecules and challenges lists No existing skeleton classes in ls.css; added local .bc-sk-* helpers per page. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -155,6 +155,27 @@
|
||||
.add-card:hover { border-color: rgba(155,93,229,.5); color: #9B5DE5; background: rgba(155,93,229,.05); }
|
||||
.add-card-icon { font-size: 2rem; }
|
||||
|
||||
/* ── Shimmer skeleton ── */
|
||||
@keyframes bc-shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
.bc-sk {
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255,255,255,0.04) 0%,
|
||||
rgba(255,255,255,0.10) 50%,
|
||||
rgba(255,255,255,0.04) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: bc-shimmer 1.6s infinite;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.bc-sk-line { height: 10px; margin: 5px 0; }
|
||||
.bc-sk-line.sm { width: 55%; }
|
||||
.bc-sk-line.md { width: 80%; }
|
||||
.bc-sk-molrow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-bottom: 2px; }
|
||||
.bc-sk-molrow .bc-sk-thumb { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
|
||||
.bc-sk-molrow .bc-sk-info { flex: 1; }
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 768px) {
|
||||
html, body { overflow: auto; }
|
||||
@@ -193,7 +214,7 @@
|
||||
<button class="ps-cat" data-cat="amino_acid" onclick="setCat(this,'amino_acid')">АК</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ps-list" id="mol-list"><div style="padding:20px;color:#555;font-size:.8rem">Загрузка…</div></div>
|
||||
<div class="ps-list" id="mol-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Right: comparison -->
|
||||
@@ -294,7 +315,19 @@ let _catFilter = '';
|
||||
let _searchQ = '';
|
||||
let _compare = []; // array of mol objects, max 4
|
||||
|
||||
function bcSkMolList(n = 10) {
|
||||
return Array.from({length: n}, () => `
|
||||
<div class="bc-sk-molrow">
|
||||
<div class="bc-sk bc-sk-thumb"></div>
|
||||
<div class="bc-sk-info">
|
||||
<div class="bc-sk bc-sk-line md"></div>
|
||||
<div class="bc-sk bc-sk-line sm"></div>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
async function init() {
|
||||
document.getElementById('mol-list').innerHTML = bcSkMolList(10);
|
||||
try {
|
||||
_allMols = await LS.biochemGetMolecules();
|
||||
applyFilter();
|
||||
|
||||
Reference in New Issue
Block a user