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();