feat: enhance LockIndicator with countdown timer

- Added a countdown timer to the LockIndicator component that activates when scrolling stops.
- Updated styles for the lock icon and countdown timer to improve visibility and positioning.
- Implemented polling and event listeners to manage the countdown state effectively.

Author: atyrode

src/frontend/src/CustomEmbeddableRenderer.scss

@@ -32,6 +32,57 @@
         &.visible {
             opacity: 1;
         }
+        
+        .lock-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+        }
+        
+        .countdown-timer {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 28px;
+            height: 28px;
+            z-index: -1; /* Place behind the lock icon */
+        }
+        
+        .circular-timer {
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+            
+            .timer-background {
+                fill: none;
+                stroke: rgba(211, 211, 211, 0.2);
+                stroke-width: 2;
+            }
+            
+            .timer-progress {
+                fill: none;
+                stroke: #d3d3d3;
+                stroke-width: 2;
+                stroke-dasharray: 100.53; /* Circumference of circle with r=16: 2 * PI * 16 */
+                stroke-dashoffset: 0;
+                animation-name: countdown;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+            }
+        }
+    }
+    
+    @keyframes countdown {
+        from {
+            stroke-dashoffset: 0;
+        }
+        to {
+            stroke-dashoffset: 100.53; /* Same as stroke-dasharray */
+        }
     }
 
     &__content {

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -90,27 +90,88 @@ export const renderCustomEmbeddable = (
   }
 };
 
-// Lock icon component that shows when scrolling
+// Lock icon component that shows when scrolling with countdown timer
 const LockIndicator = () => {
   const [visible, setVisible] = useState(false);
+  const [counting, setCounting] = useState(false);
+  const debounceTime = 500; // Match the debounce time from lockEmbeddables
 
   useEffect(() => {
+    // Use polling to check the scrolling state directly
+    const checkScrollState = () => {
+      // If we're scrolling and not already visible, show the lock
+      if (isScrolling && !visible) {
+        setVisible(true);
+        setCounting(false);
+      } 
+      // If we're not scrolling but the lock is visible and not counting down
+      else if (!isScrolling && visible && !counting) {
+        // Start the countdown
+        setCounting(true);
+        
+        // After the debounce time, hide the lock
+        setTimeout(() => {
+          setVisible(false);
+          setCounting(false);
+        }, debounceTime);
+      }
+    };
+    
+    // Check the scroll state every 50ms
+    const intervalId = setInterval(checkScrollState, 50);
+    
+    // Also listen for the custom event as a backup
     const handleScrollStateChange = (event: CustomEvent<{ isScrolling: boolean }>) => {
-      setVisible(event.detail.isScrolling);
+      if (event.detail.isScrolling) {
+        // When scrolling starts, show the lock and reset countdown
+        setVisible(true);
+        setCounting(false);
+      } else if (!counting) {
+        // When scrolling stops, start the countdown
+        setCounting(true);
+        
+        // After the debounce time, hide the lock
+        setTimeout(() => {
+          setVisible(false);
+          setCounting(false);
+        }, debounceTime);
+      }
     };
 
     // Add event listener for scroll state changes
     document.addEventListener('scrollStateChange', handleScrollStateChange as EventListener);
 
     // Clean up
     return () => {
+      clearInterval(intervalId);
       document.removeEventListener('scrollStateChange', handleScrollStateChange as EventListener);
     };
-  }, []);
+  }, [visible, counting]);
 
   return (
     <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
-      <Lock size={16} />
+      <div className="lock-container">
+        <Lock size={18} />
+        {counting && (
+          <div className="countdown-timer">
+            <svg viewBox="0 0 36 36" className="circular-timer">
+              <circle
+                className="timer-background"
+                cx="18"
+                cy="18"
+                r="16"
+              />
+              <circle
+                className="timer-progress"
+                cx="18"
+                cy="18"
+                r="16"
+                style={{ animationDuration: `${debounceTime}ms` }}
+              />
+            </svg>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
@@ -142,4 +203,4 @@ const debouncedScrollEnd = debounce(() => {
   // Dispatch event with updated scrolling state
   scrollStateChangeEvent.detail.isScrolling = false;
   document.dispatchEvent(scrollStateChangeEvent);
-}, 500); // 500ms debounce seems reasonable, but can be adjusted as needed
+}, 1000); // 500ms debounce seems reasonable, but can be adjusted as needed