Allow to display a temporary component (eg. a loading image) while a huge list of 2000 suggestions is being rendered

[DhawalRank-zz]

• Provide the steps to reproduce the issue, e.g.:

  1. Have more than 1000 items in results[]

  Observed behaviour: Suggestions open after few seconds

  Expected behaviour: Suggestions should show a default component until it finishes rendering

Are you making a feature request?

Yes

• Please describe your use case from user journey point of view, e.g.:

  In my application, when user enters a search input, allow rendering a temporary component until the rendering of suggestions is complete

[BrentGrammer]

I need to implement this into a project I am working on. Is there any solution for this?

[zachgibson]

Why not just render your own UI based on a loading state? I match my exact text input and button so when loading is false you can’t even tell anything changed.

e.g.

if (isLoading) {
  return (
    <Container>
      <InputContainer>
        <Input placeholder={placeholder} />
        <LoadingIndicator />
      </InputContainer>
      <SearchButton>Search</SearchButton>
    </Container>
  );
}

return (
  <Container>
    <AutosuggestContainer>
      <Autosuggest
        suggestions={suggestions.slice(0, 50)}
        onSuggestionSelected={this.handleSelect}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={suggestion => suggestion}
      />
    </AutosuggestContainer>
    <SearchButton onClick={this.handleSelect}>Search</SearchButton>
  </Container>
);

[DhawalRank-zz]

Why not just render your own UI based on a loading state? I match my exact text input and button so when loading is false you can’t even tell anything changed.

e.g.

if (isLoading) {
  return (
    <Container>
      <InputContainer>
        <Input placeholder={placeholder} />
        <LoadingIndicator />
      </InputContainer>
      <SearchButton>Search</SearchButton>
    </Container>
  );
}

return (
  <Container>
    <AutosuggestContainer>
      <Autosuggest
        suggestions={suggestions.slice(0, 50)}
        onSuggestionSelected={this.handleSelect}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={suggestion => suggestion}
      />
    </AutosuggestContainer>
    <SearchButton onClick={this.handleSelect}>Search</SearchButton>
  </Container>
);

Solves the problem