Function FeedLayoutProvider

packages/shared/src/contexts/FeedContext.tsx:116–201

({
  children,
}: PropsWithChildren)

);

export function FeedLayoutProvider({
  children,
}: PropsWithChildren): ReactElement {
  const { sidebarExpanded } = useSettingsContext();
  const { sidebarRendered } = useSidebarRendered();
  const { isPlus } = usePlusSubscription();
  const feedAdTemplateFeature = useConditionalFeature({
    feature: featureFeedAdTemplate,
    shouldEvaluate: !isPlus,
  });

  // Debounce sidebar expanded state to sync with sidebar CSS transition
  // This prevents the feed layout from jumping mid-animation
  const [debouncedSidebarExpanded, setDebouncedSidebarExpanded] =
    useState(sidebarExpanded);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSidebarExpanded(sidebarExpanded);
    }, SIDEBAR_TRANSITION_DURATION);

    return () => clearTimeout(timer);
  }, [sidebarExpanded]);

  const { feedSettings, defaultFeedSettings } = useMemo(() => {
    const enhancedFeedSettings = Object.entries(baseFeedSettings).reduce(
      (acc, [feedSettingsKey, feedSettingsValue]) => {
        acc[feedSettingsKey] = {
          ...feedSettingsValue,
          adTemplate:
            feedAdTemplateFeature.value[feedSettingsKey] ||
            feedAdTemplateFeature.value.default,
        };

        return acc;
      },
      {},
    ) as typeof baseFeedSettings;

    return {
      feedSettings: [
        enhancedFeedSettings.desktop,
        enhancedFeedSettings.laptopXL,
        enhancedFeedSettings.laptopL,
        enhancedFeedSettings.laptop,
        enhancedFeedSettings.tablet,
      ],
      defaultFeedSettings: enhancedFeedSettings.default,
    };
  }, [feedAdTemplateFeature.value]);

  // Generate the breakpoints for the feed settings
  // Uses debounced sidebar state to sync layout change with sidebar animation
  const feedBreakpoints = useMemo(() => {
    const breakpoints = feedSettings.map((setting) =>
      setting.breakpoint.replace('@media ', ''),
    );