How would this work if we need to have an async decorator? Something to this regard:

export const getActiveContext = () => {
  return Promise.resolve({ foo: bar }); // NOTE: this would call some long running api to bring back data before resolving
}

const withContextProvider = async (Story, storyContext) => {
  const activeContext = await getActiveContext(storyContext)
  return (
    <StatefulProvider value={activeContext}>
        <Story {...storyContext} />
    </StatefulProvider>
  )
}

export const decorators = [
  withContextProvider,
]

@agrohs: you would just refactor things slightly, and add the loader + decorator together:

export const loaders = [async () => {
  return Promise.resolve({ activeContext: { foo: bar } }),
};

export const decorators = (Story, { loaded: { activeContext } }) => {
  return (
    <StatefulProvider value={activeContext}>
        <Story {...storyContext} />
    </StatefulProvider>
  )
}

Having said that, can you tell us a little bit about your use case? Although this is an escape hatch to support it, we sort of consider async loading of data to be an anti-pattern, so I'm keen to hear about use cases to change my mind on that.

Thanks @tmeasday, that's exactly what I did and seems to be working as expected now...cheers!

one minor detail/question is in trying to prevent the loader from running again if its data has already been loaded (or not changed)? Something similar to the following (though it looks like as of now, we don't have access to loaded in the initial payload of the storyContext sent into the loader??)

export const loaders = [async ({ loaded: { activeContext: previousContext }}) => {
  if (previousContext) {
    return previousContext
  }
  return Promise.resolve({ activeContext: { foo: bar } })
}

export const decorators = (Story, { loaded: { activeContext } }) => {
  return (
    <StatefulProvider value={activeContext}>
        <Story {...storyContext} />
    </StatefulProvider>
  )
}

Hmm, I would probably suggest using some external cache here -- I don't know if SB should be doing the caching -- we pass the full context into the loader so for instance the loader could fetch different data depending on the context.id. So I don't really think we can do anything sensible in terms of caching the previous value without introducing surface area for problems.

You could do something as simple as using a global var here:

let previousContext;
export const loaders = [async ({ loaded: { activeContext: previousContext }}) => {
  if (previousContext) {
    return previousContext
  }
  return Promise.resolve({ activeContext: { foo: bar } }).then(v => { previousContext = v; return v });
}