From 217780d785b547faf077d9c5b3e119ebbe16e13c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 22 May 2025 08:40:52 -0700
Subject: [PATCH] streamlines scroller bg show/hide logic as utils

---
 src/components/Scroller/Background.svelte | 22 ++++++++++++++++------
 src/components/Theme/@types/component.ts  |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Scroller/Background.svelte b/src/components/Scroller/Background.svelte
index 337a3c15..4df7102c 100644
--- a/src/components/Scroller/Background.svelte
+++ b/src/components/Scroller/Background.svelte
@@ -9,16 +9,26 @@
   }
 
   let { index, steps, preload = 1, stackBackground = true }: Props = $props();
+
+    function shouldShowStep(i:number) {
+    if (preload === 0) return true;
+    if (stackBackground) return i <= index;
+    return i >= index - preload && i <= index + preload;
+  }
+
+  function isStepVisible(i:number) {
+    if (stackBackground) return i <= index;
+    return i === index;
+  }
 </script>
 
+
 {#each steps as step, i}
-  <!-- Load the step(s) before and after the active one, only -->
-  <!-- Unless stackBackground is true. If so, keep all steps before the current one loaded. -->
-  {#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
+  {#if shouldShowStep(i)}
     <div
-      class="step-background step-{i + 1} w-full absolute"
-      class:visible={stackBackground ? i <= index : i === index}
-      class:invisible={stackBackground ? i > index : i !== index}
+      class={`step step-${i + 1} w-full absolute`}
+      class:visible={isStepVisible(i)}
+      class:invisible={!isStepVisible(i)}
     >
       <step.background {...step.backgroundProps || {}}></step.background>
     </div>
diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
index 325faed0..b08425b7 100644
--- a/src/components/Theme/@types/component.ts
+++ b/src/components/Theme/@types/component.ts
@@ -50,5 +50,5 @@ export interface Theme {
 export interface CustomTheme {
   colour?: Partial<Colour>;
   font?: Partial<CustomFont>;
-  [customProperty: string]: unknown;
+  [customProperty: string]: unknown; 
 }