mscmls

Ну во-первых, твой await x.json() при await - это тот-же then.

И тебе правильно сказали, что без await и без костылей - ты eventLoop не обыграешь.

Можно выбрасывать при await и потом ловить то, чем оказывается промис в итоге, можно юзать Promise.withResolvers, что в принципе тоже без await нереально.

Например (с withResolvers):

const { promise, resolve, reject } = Promise.withResolvers()

const getProducts = () => fetch('https://fakestoreapi.com/products')

try {
    resolve(
        (await getProducts()).json()
    )
} catch (e) {
    reject(e)
}

console.log(
    await promise
)

Но тебе выше уже сказали, что такие операции без минимум использования оператора await - нереально исполнить. Не хочешь then - будешь юзать await, не хочешь await - будешь юзать then. Либо создавай своё подобие промисов на костылях, через кастомные события или сигналы.

P.S.: Чтобы понять, почему нельзя сделать то, что хочешь ты - прочитай то что тебе выше написали, а перед/после прочитай это.

Первая ссылка в гугле.

Попробуй использовать хэлпер "json" из ремикса и в возврате лоадера отдавай не просто объект, а оборачивай его в json({ /* ... */ }). Не пробовал, но насколько я правильно ответ понял на SO - может быть из-за этого.

P.S. А вообще - смысл оборачивать всё в JsonifyObject и т.д., если можно явно описать ожидаемый/неожиданный объект? Например:

import { useLoaderData } from 'react-router-dom'

type LoaderProps = {
    themes: {
        all: string[],
        selectedId: string
    }
} | null

export const Component = () => {
    const data = useLoaderData() as LoaderProps
    return data?.themes ? (
        <>
            Selected theme Id: { data.themes.selectedId }
            All themes: { JSON.stringify(data.themes.all) }
        </>
    ) : (
        <>No themes</>
    )
}

/// 

export const routes = [
    {
        path: '/',
        element: <Component/>,
        loader: () => ({
            themes: {
                all: [
                    'light',
                    'dark'
                ],
                selectedId: 'light'
            }
        })
    }
    /* ... */
]

Ну а в компоненте Navbar что происходит?