Function useLayoutVariant

packages/shared/src/hooks/layout/useLayoutVariant.ts:33–53

()

};

export const useLayoutVariant = (): UseLayoutVariant => {
  const serverVariant = useContext(LayoutVariantContext);
  const { isAuthReady } = useAuthContext();
  const isLaptop = useViewSize(ViewSize.Laptop);
  const { isV2, isLoading } = useLayoutVariantFlag();

  // The shell the mirrored route painted stands only until the flag can
  // contradict it, so turning `layout_v2` off takes effect on this render
  // rather than the next hard navigation. `isLaptop` is client-only and would
  // contradict what the server painted, so it applies from the second render
  // on: `isAuthReady` is false on the server and on the first client render,
  // which makes it the hydration boundary.
  if (serverVariant && isLoading) {
    return {
      isV2: serverVariant === 'v2' && (!isAuthReady || isLaptop),
      isLoading: false,
    };
  }

  return { isV2, isLoading: serverVariant ? false : isLoading };
};