refactor: simplify LockIndicator by removing countdown timer

- Removed the countdown timer functionality from the LockIndicator component, streamlining its behavior to only show the lock icon when scrolling.
- Updated styles to reflect the removal of the countdown timer and adjusted the lock icon's size for better integration.
- Cleaned up the useEffect hook to eliminate unnecessary state management related to the countdown.

Author: atyrode

src/frontend/src/CustomEmbeddableRenderer.scss

@@ -32,57 +32,6 @@
         &.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,88 +90,27 @@ export const renderCustomEmbeddable = (
   }
 };
 
-// Lock icon component that shows when scrolling with countdown timer
+// Lock icon component that shows when scrolling
 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 }>) => {
-      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);
-      }
+      setVisible(event.detail.isScrolling);
     };
 
     // 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' : ''}`}>
-      <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>
+      <Lock size={16} />
     </div>
   );
 };
@@ -203,4 +142,4 @@ const debouncedScrollEnd = debounce(() => {
   // Dispatch event with updated scrolling state
   scrollStateChangeEvent.detail.isScrolling = false;
   document.dispatchEvent(scrollStateChangeEvent);
-}, 1000); // 500ms debounce seems reasonable, but can be adjusted as needed
+}, 350);