From 2a31e39cbddcd1c7029009bca5c2ffe5ab94af37 Mon Sep 17 00:00:00 2001
From: webfiltered <176114999+webfiltered@users.noreply.github.com>
Date: Tue, 30 Jul 2024 16:08:00 +1000
Subject: [PATCH] Fix lightbox loading position

Issue
When scrolling through images in the Image Feed, there is a brief jitter as images are loaded.

Cause
The loading spinner is an inline sibling element of the image element.

Solution
Use absolute positioning on the spinner root element, relative to the containing pysssss-lightbox-link element.  Use flex to centre the lightbox contents.
---
 web/js/common/lightbox.css | 4 +++-
 web/js/common/spinner.css  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/js/common/lightbox.css b/web/js/common/lightbox.css
index 41fa52d..965aba5 100644
--- a/web/js/common/lightbox.css
+++ b/web/js/common/lightbox.css
@@ -49,7 +49,9 @@
 }
 
 .pysssss-lightbox-link {
-	display: inline-block;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	position: relative;
 }
 
diff --git a/web/js/common/spinner.css b/web/js/common/spinner.css
index 3b47902..cfb7a0d 100644
--- a/web/js/common/spinner.css
+++ b/web/js/common/spinner.css
@@ -1,6 +1,6 @@
 .pysssss-lds-ring {
 	display: inline-block;
-	position: relative;
+	position: absolute;
 	width: 80px;
 	height: 80px;
 }