react activity

Sidebar.tsx

import { useState } from 'react';
import { unstable_Activity as Activity } from 'react';

function Sidebar() {
  const [scrollPosition, setScrollPosition] = useState(0);
  const [inputValue, setInputValue] = useState('');

  // This effect would pause when hidden
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Sidebar is active'); // Logs only when visible
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{ height: '100vh', overflowY: 'auto' }}>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type here (state persists)"
      />
      <div style={{ height: '200vh' }}>
        Scroll me! Position: {scrollPosition}
        <br />
        {/* Long content to scroll */}
      </div>
    </div>
  );
}

function App() {
  const [isSidebarVisible, setIsSidebarVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsSidebarVisible(!isSidebarVisible)}>
        Toggle Sidebar
      </button>
      <Activity mode={isSidebarVisible ? 'visible' : 'hidden'}>
        <Sidebar />
      </Activity>
    </div>
  );
}