needs loading flag that whether ld has fetched flags

[sudokzt]

Is your feature request related to a problem? Please describe. I would love to wait until what LD fetches flags. In current, I'm realizing it with flag state that returns value by useFlags().

Describe the solution you'd like I'm looking forward to return loading value from useFlags().

Describe alternatives you've considered In current, useFlags returns only flags. And whether the LD got the flag is checked by whether the value of useFlags() is null. But, it's unintuitive. So I want a loading flag.

[louis-launchdarkly]

Hello @sudokzt, thank you for reaching out. Please let me know and elaborate if the following answer doesn't quite answer your question.

It seems you want to make sure you wait for the flag values from LD instead of using the Client immediately. If that is the case, would the asyncWithLDProvider(config: AsyncProviderConfig) in here which wait for the ldClient to be ready works for you?

[XieX]

An alternative to using useFlags would be to use the useLDClient hook - it will return undefined until the client is ready. For example, an "is ready" custom hook might look something like this,

import { useLDClient } from 'launchdarkly-react-client-sdk'

export default function useIsLDReady(): boolean {
  const ldClient = useLDClient()

  return ldClient !== undefined
}

[Hamad-98]

Hello @louis-launchdarkly I have tried using asyncWithLDProvider({}), but on the initial app load useFlags() is still returning an empty object, but it returns the object with the flags after a few seconds. When the object is empty for some reason the flags are retuning false, but the actual values are true on launch darkly panel. This is causing flickering of components within the app, How can I overcome this? Here is my index.tsx file

(async () => {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: .............,
    user: {
      anonymous: true,
    },
  });

  return ReactDOM.render(
    <LDProvider>
      <App />
    </LDProvider>,
    document.getElementById('root'),
  );
})()

[lschwall4]

I am currently having the same issues in regards to this. Commenting to follow the solution

[gideon-grossman]

Does anyone have a solution for this flickering yet? Also experiencing it.

[bnussman]

What is stopping Launch Darkly from having something like

const { isLoading } = useLDClient();

Also why is useLDClient returning undefined even when it's wrapped in withLDProvider. Shouldn't useLDClient never return undefined if it's nested under a withLDProvider?

[yougotashovel]

Also finding this issue is still ongoing.

[13mikj]

likewise issue is still occuring

[JoshClopton]

Following

[juanporley]

We've been running into a similar issue that has been mentioned in this thread. By initializing the client first (awaiting it), and then wrapping the React app with the provider, on load we get no values for our feature flags, when the client should've already been initialized. We've started seeing this more lately, which could've been after we upgraded to Webpack 5. I wonder if there is any polyfill the LD client relies on that might be causing this to happen ?(since webpack 5 stopped polyfilling a bunch of node utils) It seems to be sporadic, haven't been able to pinpoint when/why.

[hkedia321]

Following

[yevhen-logosha]

Try this from docs: https://docs.launchdarkly.com/sdk/client-side/javascript/?q=waitforinitialization#use-promises-to-determine-when-the-client-is-ready

there are waitUntilReady and waitForInitialization methods exposed by SDK on useLDClient