Add option for instant transitions in lightbox (#6354)

graphql/schema/types/config.graphql

@@ -339,6 +339,7 @@ input ConfigImageLightboxInput {
   resetZoomOnNav: Boolean
   scrollMode: ImageLightboxScrollMode
   scrollAttemptsBeforeChange: Int
+  disableAnimation: Boolean
 }
 
 type ConfigImageLightboxResult {
@@ -348,6 +349,7 @@ type ConfigImageLightboxResult {
   resetZoomOnNav: Boolean
   scrollMode: ImageLightboxScrollMode
   scrollAttemptsBeforeChange: Int!
+  disableAnimation: Boolean
 }
 
 input ConfigInterfaceInput {

internal/api/resolver_mutation_configure.go

@@ -493,6 +493,8 @@ func (r *mutationResolver) ConfigureInterface(ctx context.Context, input ConfigI
 		r.setConfigString(config.ImageLightboxScrollModeKey, (*string)(options.ScrollMode))
 
 		r.setConfigInt(config.ImageLightboxScrollAttemptsBeforeChange, options.ScrollAttemptsBeforeChange)
+
+		r.setConfigBool(config.ImageLightboxDisableAnimation, options.DisableAnimation)
 	}
 
 	if input.CSS != nil {

internal/manager/config/config.go

@@ -209,6 +209,7 @@ const (
 	ImageLightboxResetZoomOnNav             = "image_lightbox.reset_zoom_on_nav"
 	ImageLightboxScrollModeKey              = "image_lightbox.scroll_mode"
 	ImageLightboxScrollAttemptsBeforeChange = "image_lightbox.scroll_attempts_before_change"
+	ImageLightboxDisableAnimation           = "image_lightbox.disable_animation"
 
 	UI = "ui"
 
@@ -1296,6 +1297,10 @@ func (i *Config) GetImageLightboxOptions() ConfigImageLightboxResult {
 	if v := i.with(ImageLightboxScrollAttemptsBeforeChange); v != nil {
 		ret.ScrollAttemptsBeforeChange = v.Int(ImageLightboxScrollAttemptsBeforeChange)
 	}
+	if v := i.with(ImageLightboxDisableAnimation); v != nil {
+		value := v.Bool(ImageLightboxDisableAnimation)
+		ret.DisableAnimation = &value
+	}
 
 	return ret
 }

internal/manager/config/ui.go

@@ -13,6 +13,7 @@ type ConfigImageLightboxResult struct {
 	ResetZoomOnNav             *bool                     `json:"resetZoomOnNav"`
 	ScrollMode                 *ImageLightboxScrollMode  `json:"scrollMode"`
 	ScrollAttemptsBeforeChange int                       `json:"scrollAttemptsBeforeChange"`
+	DisableAnimation           *bool                     `json:"disableAnimation"`
 }
 
 type ImageLightboxDisplayMode string

ui/v2.5/graphql/data/config.graphql

@@ -100,6 +100,7 @@ fragment ConfigInterfaceData on ConfigInterfaceResult {
     resetZoomOnNav
     scrollMode
     scrollAttemptsBeforeChange
+    disableAnimation
   }
   disableDropdownCreate {
     performer

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -599,6 +599,13 @@ export const SettingsInterfacePanel: React.FC = PatchComponent(
               saveLightboxSettings({ scrollAttemptsBeforeChange: v })
             }
           />
+
+          <BooleanSetting
+            id="lightbox_disable_animation"
+            headingID="dialogs.lightbox.disable_animation"
+            checked={iface.imageLightbox?.disableAnimation ?? false}
+            onChange={(v) => saveLightboxSettings({ disableAnimation: v })}
+          />
         </SettingSection>
 
         <SettingSection headingID="config.ui.detail.heading">

ui/v2.5/src/hooks/Lightbox/Lightbox.tsx

@@ -200,6 +200,8 @@ export const LightboxComponent: React.FC<IProps> = ({
     config?.interface.imageLightbox.scrollAttemptsBeforeChange ?? 0
   );
 
+  const disableAnimation = config?.interface.imageLightbox.disableAnimation;
+
   function setSlideshowDelay(v: number) {
     setLightboxSettings({ slideshowDelay: v });
   }
@@ -340,6 +342,10 @@ export const LightboxComponent: React.FC<IProps> = ({
     (isUserAction = true) => {
       if (isSwitchingPage || index === -1) return;
 
+      if (disableAnimation) {
+        setInstant();
+      }
+
       setShowChapters(false);
       setMovingLeft(true);
 
@@ -357,13 +363,25 @@ export const LightboxComponent: React.FC<IProps> = ({
         resetIntervalCallback.current();
       }
     },
-    [images, pageCallback, isSwitchingPage, resetIntervalCallback, index]
+    [
+      images,
+      pageCallback,
+      isSwitchingPage,
+      resetIntervalCallback,
+      index,
+      disableAnimation,
+      setInstant,
+    ]
   );
 
   const handleRight = useCallback(
     (isUserAction = true) => {
       if (isSwitchingPage) return;
 
+      if (disableAnimation) {
+        setInstant();
+      }
+
       setMovingLeft(false);
       setShowChapters(false);
 
@@ -388,6 +406,8 @@ export const LightboxComponent: React.FC<IProps> = ({
       isSwitchingPage,
       resetIntervalCallback,
       index,
+      disableAnimation,
+      setInstant,
     ]
   );
 

ui/v2.5/src/locales/en-GB.json

@@ -938,6 +938,7 @@
     },
     "lightbox": {
       "delay": "Delay (Sec)",
+      "disable_animation": "Disable transition animation between images",
       "display_mode": {
         "fit_horizontally": "Fit horizontally",
         "fit_to_screen": "Fit to screen",