Themes

import { useThemeSelection } from '@cskn/sdk';
import { ThemeHost } from '@cskn/ui';

function UserPage({ username, feed, builtIn, holding }: Props) {
  const { selection, bundleUrl, isResolving, expectsTheme, prerendered, reportResult } =
    useThemeSelection(username);

  // Until the selection is known, hold a neutral frame if a theme is expected,
  // otherwise draw the built-in design. Drawing both in turn makes the page jump.
  if (isResolving) return expectsTheme ? holding : builtIn;
  if (!selection) return builtIn;

  return (
    <ThemeHost
      bundleUrl={bundleUrl}
      bundleHash={selection.theme.bundleHash}
      declaredTokens={selection.theme.tokens}
      settings={selection.settings}
      profile={selection.context?.profile ?? { name: username, username }}
      slots={{ content: feed }}
      fallback={builtIn}
      pending={holding}
      prerendered={prerendered}
      onThemeResult={reportResult}
    />
  );
}