From 1980cb035e9ff7dc849cd74e737e3dfef87b08a9 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 13 Feb 2025 11:56:39 +0530
Subject: [PATCH] Add example

---
 web/apps/photos/src/styles/global.css                    | 4 ++++
 .../new/photos/components/FileViewerPhotoSwipe.tsx       | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/web/apps/photos/src/styles/global.css b/web/apps/photos/src/styles/global.css
index 77583e306f..60f4b22151 100644
--- a/web/apps/photos/src/styles/global.css
+++ b/web/apps/photos/src/styles/global.css
@@ -124,3 +124,7 @@ body {
     width: 100%;
     height: 100%;
 }
+
+.pswp-ente .pswp__preloader--active .pswp__icn {
+  opacity: 0.4;
+}
diff --git a/web/packages/new/photos/components/FileViewerPhotoSwipe.tsx b/web/packages/new/photos/components/FileViewerPhotoSwipe.tsx
index c2f6f4fb0d..5196d2f6dd 100644
--- a/web/packages/new/photos/components/FileViewerPhotoSwipe.tsx
+++ b/web/packages/new/photos/components/FileViewerPhotoSwipe.tsx
@@ -342,6 +342,15 @@ export class FileViewerPhotoSwipe {
             });
         });
 
+        // Modify the default UI elements.
+        pswp.addFilter("uiElement", (element, data) => {
+            if (element.name == "preloader") {
+                // TODO(PS): Left as an example. For now, this is customized in
+                // the CSS.
+            }
+            return element;
+        });
+
         // Initializing PhotoSwipe adds it to the DOM as a dialog-like div with
         // the class "pswp".
         pswp.init();