Loading indicator during mention data fetch

[ruswerner]

Steps to reproduce:

1. Create a <Mention> component with a function for the data prop, which async fetches results from a server

Expected behaviour:

The suggestions panel is immediately shown with a loading (spinner) indicator, until the data is fetched and passed to the callback argument.

Observed behaviour:

The suggestions panel does not show until after the data is fetched.

Workaround:

Please tell.

[jfschwarz]

We do render a LoadingIndicator element, which just renders 5 divs you can style with CSS to realize a spinner animation. This is not really documented so far, but here's an example for some spinner inline styles (of course you can achieve the same with css):

import { css } from 'glamor'
import { MentionsInput } from 'react-mentions'

const stretchdelay = css.keyframes({
  '0%': { transform: 'scaleY(0.4)' },
  '40%': { transform: 'scaleY(0.4)' },
  '100%': { transform: 'scaleY(0.4)' },

  '20%': { transform: 'scaleY(1.0)' },
})

const style = {
    loadingIndicator: {
      spinner: {
        marginTop: 4,
        marginBottom: 4,

        width: 100,
        height: 8,

        textAlign: 'center',
        fontSize: '11px',

        element: {
          display: 'inline-block',

          backgroundColor: '#999',

          height: '100%',
          width: 2,

          marginLeft: 3,
          marginRight: 3,

          animation: 'x 1.2s infinite ease-in-out',
          animationName: stretchdelay,
        },

        element2: { animationDelay: '-1.1s' },
        element3: { animationDelay: '-1.0s' },
        element4: { animationDelay: '-0.9s' },
        element5: { animationDelay: '-0.8s' },
      },
    },
}

<MentionsInput style={style} ... />

[kalemi19]

Any idea why the LoadingIndicator is not rendered for me? Anything I need to set in the props?

I'm using the latest version 2.3.0.

Thanks in advance

UPDATE: Need to pass isLoading property to in order for the loadingIndicator to be rendered. Hopefully this will be documented one day 😉

[CalvinJamesHeath]

It isn't working for me. When using customSuggestionsContainer for loading on the MentionsInput component, it only becomes active in the event that results are found (I know that customSuggestionsContainer is not for that but i tried anyways). Upon invoking the data function, the entire list becomes obscured until the results appear. Which defies logic.

[mishozhghenti]

@kalemi19 can you please put the missing part of the code?

[kalemi19]

@mishozhghenti it's been a very long so this thread is not fresh to me, but just in case:

<Mention key={1} trigger="@" markup={MENTION_MARKUP} data={this.onQuery.bind(this)} appendSpaceOnAdd isLoading={isLoading} style={{ backgroundColor: colorPalette.secondaryLight, opacity: 0.3 }} displayTransform={(id, display) => MobileEditor.displayTransform(id, display, socialNetwork)} renderSuggestion={suggestion => MobileEditor.renderMentionSuggestion(suggestion)} onAdd={id => handleMentionSelection && handleMentionSelection(id)} />