Activity and preload

import {
  Activity,
  Suspense,
  useMemo,
  useState,
} from 'react'
import {preloadObservablePromise} from 'react-rx'

import {fetchTab$} from './api'
import TabPanel from './TabPanel'

type Strategy = 'none' | 'preload' | 'activity'

const TABS = [
  'Posts',
  'Photos',
  'Settings',
] as const

function TabButton({
  tab,
  active,
  strategy,
  onSelect,
}: {
  tab: (typeof TABS)[number]
  active: boolean
  strategy: Strategy
  onSelect: () => void
}) {
  const data$ = useMemo(
    () => fetchTab$(tab),
    [tab],
  )

  return (
    <button
      type="button"
      onMouseEnter={() => {
        if (strategy === 'preload') {
          void preloadObservablePromise(data$, {
            ttl: 10_000,
          })
        }
      }}
      onClick={onSelect}
      style={{fontWeight: active ? 700 : 400}}
    >
      {tab}
    </button>
  )
}

export default function App() {
  const [strategy, setStrategy] =
    useState<Strategy>('none')
  const [active, setActive] =
    useState<(typeof TABS)[number]>('Posts')

  return (
    <div
      style={{
        fontFamily: 'system-ui',
        padding: 16,
        maxWidth: 480,
      }}
    >
      <h2 style={{marginTop: 0}}>
        Prefetch strategies
      </h2>
      <p style={{fontSize: 14}}>
        Each tab fetch takes ~1s. Compare
        click-only loading vs hover preload vs
        hidden <code>Activity</code> pre-render.
      </p>

      <label
        style={{
          display: 'block',
          marginBottom: 12,
        }}
      >
        Strategy:{' '}
        <select
          value={strategy}
          onChange={(e) =>
            setStrategy(
              e.target.value as Strategy,
            )
          }
        >
          <option value="none">
            No prefetch (fetch on reveal)
          </option>
          <option value="preload">
            Hover preload
          </option>
          <option value="activity">
            Activity pre-render
          </option>
        </select>
      </label>

      <div
        style={{
          display: 'flex',
          gap: 8,
          marginBottom: 16,
        }}
      >
        {TABS.map((tab) => (
          <TabButton
            key={tab}
            tab={tab}
            active={active === tab}
            strategy={strategy}
            onSelect={() => setActive(tab)}
          />
        ))}
      </div>

      <Suspense
        fallback={
          <p style={{opacity: 0.7}}>
            🌀 Loading…
          </p>
        }
      >
        {strategy === 'activity' ? (
          TABS.map((tab) => (
            <Activity
              key={tab}
              mode={
                active === tab
                  ? 'visible'
                  : 'hidden'
              }
            >
              <TabPanel tab={tab} />
            </Activity>
          ))
        ) : (
          <TabPanel tab={active} />
        )}
      </Suspense>
    </div>
  )
}