ef
This commit is contained in:
@@ -7156,6 +7156,12 @@ button#togglebg {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Quick fade-out for in-place grid reloads (logo click) — matches the 150ms JS setTimeout */
|
||||||
|
.grid-fade-out {
|
||||||
|
opacity: 0 !important;
|
||||||
|
transition: opacity 0.15s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-transition.show {
|
.grid-transition.show {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
transition: opacity 0.3s ease-in-out;
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
|||||||
@@ -2379,7 +2379,15 @@ window.cancelAnimFrame = (function () {
|
|||||||
// Show loading indicator
|
// Show loading indicator
|
||||||
if (navbar) navbar.classList.add("pbwork");
|
if (navbar) navbar.classList.add("pbwork");
|
||||||
|
|
||||||
if (replace && posts) {
|
// For same-grid reloads (e.g. logo click while already on a grid page), keep the current
|
||||||
|
// thumbs visible during the network fetch — fading out before data arrives causes a long
|
||||||
|
// blank-thumb period. We'll do a quick fade at the point of DOM swap instead.
|
||||||
|
// For structural transitions (item view → grid, profile → grid, etc.) the existing
|
||||||
|
// pre-fade is fine because posts was already cleared or doesn't exist yet.
|
||||||
|
const _postsHasContent = posts && posts.children.length > 0;
|
||||||
|
const _isInPlaceGridReload = replace && _postsHasContent;
|
||||||
|
|
||||||
|
if (replace && posts && !_isInPlaceGridReload) {
|
||||||
posts.classList.add('grid-transition');
|
posts.classList.add('grid-transition');
|
||||||
posts.classList.remove('show');
|
posts.classList.remove('show');
|
||||||
}
|
}
|
||||||
@@ -2852,7 +2860,24 @@ window.cancelAnimFrame = (function () {
|
|||||||
|
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
if (replace) {
|
if (replace) {
|
||||||
// Atomic replacement to prevent "jumping"
|
if (_isInPlaceGridReload) {
|
||||||
|
// Same-grid reload: fade out current content, swap, fade back in.
|
||||||
|
// .grid-fade-out has a 150ms opacity transition — we wait for it then swap.
|
||||||
|
posts.classList.add('grid-fade-out');
|
||||||
|
const _doSwap = () => {
|
||||||
|
posts.classList.remove('grid-fade-out');
|
||||||
|
posts.classList.add('grid-transition');
|
||||||
|
posts.classList.remove('show');
|
||||||
|
posts.innerHTML = data.html;
|
||||||
|
window.updateVisitIndicators();
|
||||||
|
window.initLazyLoading();
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
requestAnimationFrame(() => posts.classList.add('show'));
|
||||||
|
};
|
||||||
|
// Wait for the .grid-fade-out transition (150ms in CSS)
|
||||||
|
setTimeout(_doSwap, 160);
|
||||||
|
} else {
|
||||||
|
// Structural transition: content is already blank/replaced, just inject and show
|
||||||
posts.innerHTML = data.html;
|
posts.innerHTML = data.html;
|
||||||
window.updateVisitIndicators();
|
window.updateVisitIndicators();
|
||||||
window.initLazyLoading();
|
window.initLazyLoading();
|
||||||
@@ -2870,6 +2895,7 @@ window.cancelAnimFrame = (function () {
|
|||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
posts.classList.add('show');
|
posts.classList.add('show');
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Update header (h2) for tags/users
|
// Update header (h2) for tags/users
|
||||||
const container = document.querySelector('.index-container');
|
const container = document.querySelector('.index-container');
|
||||||
|
|||||||
Reference in New Issue
Block a user