feat: loading indicator #544

bobylito · 2017-10-31T14:08:02Z

This PR adds a loading indicator based on the proposal made here. However this version has changed a little:

the mechanics that determine if the search is stalled is implemented in the core of the library
there are options both on <InstantSearch> and <SearchBox>. The first one is for configuring the timer and the other is for displaying a loading indicator.

This is a POC implementation and the there is no design for the indicator (it's a red background) on purpose. Happy to discuss the API and the implementation.

This is definitely something that we can skip...

With this implementation all the connectors can propagate the information that the search is currently stalled (meaning that it seems that there are slow network issues). Currently it is only implemented in the searchbox.

algobot · 2017-10-31T14:12:51Z

Deploy preview ready!

Built with commit c9e156c

https://deploy-preview-544--react-instantsearch.netlify.com

mthuret · 2017-11-02T12:57:21Z

@bobylito since you updated the yarn version under package.json you'll need to update also the travis script :)

bobylito · 2017-11-02T13:07:11Z

@bobylito since you updated the yarn version under package.json you'll need to update also the travis script :)

Sure will do. 👍

mthuret · 2017-11-02T15:55:27Z

stories/SearchBox.stories.js

+    <WrapWithHits searchBox={false} linkedStoryGroup="SearchBox">
+      <SearchBox showLoading={true} />
+    </WrapWithHits>
+  ))
  .add('playground', () => (
    <WrapWithHits searchBox={false} linkedStoryGroup="SearchBox">


Could you add the showLoading props as knobs on playground story?

bobylito · 2017-11-02T15:57:15Z

Oh yes I will do that 👌

mthuret · 2017-11-02T15:58:15Z

That's a very nice feature here :) Adding this loading info to other connector can be done quickly!

If I'm not mistaken there's only the spinner missing here. Do you need action/help of someone here @bobylito?

bobylito · 2017-11-03T13:35:44Z

If I'm not mistaken there's only the spinner missing here. Do you need action/help of someone here @bobylito?

No I'm good for the implementation. I'm not quite settled on the implementation details for all InstantSearch. Once I'm sure of the consistency then I'll finish the feature :)

I'm wondering how to properly test that though... 🤔

anonrig · 2017-11-16T20:29:14Z

We should totally add this to autoComplete connector.

For consistency with InstantSearch.js

It was a mistake to try to fix the current behaviour of this flag. We should keep it as legacy and remove it during the next major.

And fix tests

…icator

bobylito · 2017-12-05T16:02:02Z

I think that now it should be good to go :) cc @samouss

samouss

Nice! 👍 I left few comments.

samouss · 2017-12-06T18:04:31Z

.travis.yml

@@ -9,7 +9,7 @@ addons:
 before_install:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.2.0
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.2.1


The version should match the one in the package.json => 1.3.2

samouss · 2017-12-06T18:14:38Z

packages/react-instantsearch/src/components/SearchBox.js

@@ -172,6 +176,10 @@ class SearchBox extends Component {
      </svg>
    );

+    const loadingIndicatorComponent = this.props.loadingIndicatorComponent ? (
+      this.props.loadingIndicatorComponent
+    ) : <DefaultLoadingIndicator />;


We could provide a default props for loadingIndicatorComponent with the value DefaultLoadingIndicator. It will avoid the need to do the condition.

samouss · 2017-12-06T18:17:13Z

packages/react-instantsearch/src/components/SearchBox.js

+          role="search"
+          {...cx(
+            'wrapper',
+            this.props.showLoadingIndicator &&


We can probably create a variable for this.props.showLoadingIndicator && this.props.isSearchStalled since we are using this expression three times. It will be a bit less verbose in the code.

And do you have an idea for a name for this variable?

Nevermind, it's gonna be isSearchStalled :)

samouss · 2017-12-06T18:19:38Z

packages/react-instantsearch/src/core/InstantSearch.js

+      props.stalledSearchDelay === undefined ||
+      props.stalledSearchDelay === null
+        ? 200
+        : props.stalledSearchDelay;


We could provide a default props for stalledSearchDelay with the value 200. It will avoid the need to do the condition.

samouss · 2017-12-06T18:20:42Z

packages/react-instantsearch/src/core/createInstantSearchManager.js

 }) {
  const baseSP = new SearchParameters({
    ...searchParameters,
    index: indexName,
    ...highlightTags,
  });

+  let stalledSearchTimer = null;
+  let isSearchStalled = false;


You could store the variable isSearchStalled directly into the store. Then we can avoid to keep track of the same value twice.

samouss · 2017-12-06T18:25:01Z

packages/react-instantsearch/src/components/SearchBox.js

@@ -25,6 +26,9 @@ class SearchBox extends Component {
    onReset: PropTypes.func,
    onChange: PropTypes.func,

+    isSearchStalled: PropTypes.bool,


We could set this value required since isSearchStalled will be always pass to the component.

From a usage perspective, I would argue that this value is only useful if showLoadingIndicator is true and the only value that we really about is true. Considering that, do you think it should still be marked as required?

We can leave it as it it then, but when we define an optional props it's recommended to always give them a default value. So we can put a default value to false on the isSearchStalled. WDYT?

Ok WFM 👍

samouss · 2017-12-06T18:25:31Z

packages/react-instantsearch/src/components/List.js

@@ -134,6 +134,7 @@ class List extends Component {
              selectItem(items[0], this.resetQuery);
            }
          }}
+          showLoadingIndicator={false}


We could provide a default props for showLoadingIndicator with the value false. It will avoid the need to force the value to false when we don't want the indicator to display.

…/react-instantsearch into feat/searchbox-loading-indicator

bobylito · 2017-12-07T10:54:27Z

I took care of your comments. Feel free to have another look ;)

samouss · 2017-12-07T12:10:45Z

packages/react-instantsearch/src/core/createConnector.js

@@ -227,12 +227,14 @@ export default function createConnector(connectorDesc) {
          metadata,
          resultsFacetValues,
          searchingForFacetValues,
+          isSearchStalled,
        } = store.getState();
        const searchState = {


We can take advantage of your changes for rename the variable to searchResults. The third parameter pass to getProvidedProps is searchResults. The second one is searchState. So it's bit confusing to have searchResults called searchState 🙂

https://community.algolia.com/react-instantsearch/guide/Custom_connectors.html#getprovidedpropsprops-searchstate-searchresults-meta-searchforfacetvaluesresults

The search is now considered stalled before first results.

…/react-instantsearch into feat/searchbox-loading-indicator

samouss

Sorry but I miss some things during the previous review. We could add some test cases for the SearchBox component.

samouss · 2017-12-08T11:31:26Z

packages/react-instantsearch/src/components/SearchBox.js

+            >
+              {loadingIndicatorComponent}
+            </div>
+          )}


We could add a test for this logic. Verify depending on the given props that the loading component is displayed or not (with a Snapshot).

samouss · 2017-12-08T11:32:16Z

packages/react-instantsearch/src/components/SearchBox.js

-    );
+    const submitComponent = this.props.submitComponent;
+    const resetComponent = this.props.resetComponent;
+    const loadingIndicatorComponent = this.props.loadingIndicatorComponent;


We could use destructuring assignment for those variables.

…/react-instantsearch into feat/searchbox-loading-indicator

bobylito · 2017-12-08T11:51:42Z

Happy to oblige :) Here you are :)

samouss · 2017-12-08T14:13:20Z

packages/react-instantsearch/src/components/SearchBox.js

+      loadingIndicatorComponent,
+      resetComponent,
+      submitComponent,
+    } = this.props;


We could merge the destructuring props with the one above. Because we destruct the same attributes two times (see line 203).

samouss

Nice feature @bobylito! 👍 🎉

Thanks!

<a name="4.3.0"></a> * reset page with multi index ([#665](#665)) ([865b7dc](865b7dc)) * **SearchBox:** use hidden over style to hide loader ([#714](#714)) ([ed5eb77](ed5eb77)) * test recipes ([#740](#740)) ([de2cc37](de2cc37)) * track all index in the manager ([#660](#660)) ([793502b](793502b)) * loading indicator ([#544](#544)) ([189659e](189659e)) * **Highlight:** support array of strings ([#715](#715)) ([8e93c6a](8e93c6a))

bobylito added 4 commits October 31, 2017 11:37

chore(package.json): update yarn requirement

12edcd6

This is definitely something that we can skip...

feat(loading-indicator): add information about stalled searches

317e2a5

With this implementation all the connectors can propagate the information that the search is currently stalled (meaning that it seems that there are slow network issues). Currently it is only implemented in the searchbox.

feat(loading-indicator): Make timeout for stalled search configurable

cc40543

feat(loading-indicator): add option to searchbox

05eebf0

bobylito requested a review from mthuret October 31, 2017 14:08

bobylito added the DO NOT MERGE - Only for review label Nov 2, 2017

chore(ci): update yarn version in travis config

37d353c

mthuret reviewed Nov 2, 2017

View reviewed changes

bobylito mentioned this pull request Nov 3, 2017

feat: provide a loading indicator algolia/vue-instantsearch#354

Merged

2 tasks

bobylito added 9 commits November 27, 2017 17:31

chore: rename stalledSearchTimeout into stalledSearchDelay

eb55566

For consistency with InstantSearch.js

fix: revert behaviour change of searching

549368f

It was a mistake to try to fix the current behaviour of this flag. We should keep it as legacy and remove it during the next major.

feat(SearchBox): new API for the loading indicator

499525d

And fix tests

Merge remote-tracking branch 'origin' into feat/searchbox-loading-ind…

b6c6e5b

…icator

fix: actually add the loading indicator

f2b3ccf

chore(stories): add with custom loading indicator

6a3d96b

chore(doc): add doc for new API

dd9a214

chore(createInstantSearchManager): test loading status

38990cd

chore: remove loading indicator DOM when not needed

17f3a3e

bobylito requested a review from samouss December 5, 2017 16:01

Merge branch 'master' into feat/searchbox-loading-indicator

5dbcaed

bobylito removed the DO NOT MERGE - Only for review label Dec 5, 2017

samouss reviewed Dec 6, 2017

View reviewed changes

bobylito and others added 8 commits December 7, 2017 10:48

refactor(SearchBox): isSearchStalled computed once

06c25f8

chore: eslint:fix

94b5d3d

refactor(SearchBox): use default props for components

b0c59a4

chore: isSearchStalled should have a default value

10e94d1

chore: update yarn version (consistency)

cf84f01

chore: remove props since it's the same value as default

a6783a5

Merge branch 'feat/searchbox-loading-indicator' of github.com:algolia…

4f1e07f

…/react-instantsearch into feat/searchbox-loading-indicator

Merge branch 'master' into feat/searchbox-loading-indicator

4999728

samouss reviewed Dec 7, 2017

View reviewed changes

bobylito and others added 6 commits December 7, 2017 15:49

chore(storybook): loading indicator as knob

7c63e77

chore: udpate the behaviour and improve test

5d95fd4

The search is now considered stalled before first results.

Merge branch 'feat/searchbox-loading-indicator' of github.com:algolia…

7432ec9

…/react-instantsearch into feat/searchbox-loading-indicator

chore: fix lint

624a58a

refactor: variable renaming in createConnector

54ac58c

Merge branch 'master' into feat/searchbox-loading-indicator

a14ed1a

samouss suggested changes Dec 8, 2017

View reviewed changes

bobylito added 3 commits December 8, 2017 12:41

chore: syntactic sugar

f594a62

chore(SearchBox): test behaviour with stalled search

af014c3

Merge branch 'feat/searchbox-loading-indicator' of github.com:algolia…

8521fa3

…/react-instantsearch into feat/searchbox-loading-indicator

samouss suggested changes Dec 8, 2017

View reviewed changes

samouss mentioned this pull request Dec 8, 2017

chore: increase Dom bundle max size #703

Merged

refactor: consolidate destructuring of props

84a4614

samouss approved these changes Dec 8, 2017

View reviewed changes

Merge branch 'master' into feat/searchbox-loading-indicator

c9e156c

samouss merged commit 189659e into master Dec 8, 2017

samouss deleted the feat/searchbox-loading-indicator branch December 8, 2017 16:35

Haroenv mentioned this pull request Dec 15, 2017

Autocomplete, empty query and slow network. #465

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: loading indicator #544

feat: loading indicator #544

bobylito commented Oct 31, 2017 •

edited

algobot commented Oct 31, 2017 •

edited

mthuret commented Nov 2, 2017

bobylito commented Nov 2, 2017

mthuret Nov 2, 2017 •

edited

bobylito commented Nov 2, 2017 via email •

edited by Haroenv

mthuret commented Nov 2, 2017

bobylito commented Nov 3, 2017 •

edited

anonrig commented Nov 16, 2017

bobylito commented Dec 5, 2017

samouss left a comment

samouss Dec 6, 2017

samouss Dec 6, 2017

samouss Dec 6, 2017

bobylito Dec 7, 2017

bobylito Dec 7, 2017

samouss Dec 6, 2017

samouss Dec 6, 2017 •

edited

samouss Dec 6, 2017

bobylito Dec 7, 2017

samouss Dec 7, 2017

bobylito Dec 7, 2017

samouss Dec 6, 2017

bobylito commented Dec 7, 2017

samouss Dec 7, 2017

samouss left a comment

samouss Dec 8, 2017

samouss Dec 8, 2017

bobylito commented Dec 8, 2017

samouss Dec 8, 2017

samouss left a comment

feat: loading indicator #544

feat: loading indicator #544

Conversation

bobylito commented Oct 31, 2017 • edited

algobot commented Oct 31, 2017 • edited

mthuret commented Nov 2, 2017

bobylito commented Nov 2, 2017

mthuret Nov 2, 2017 • edited

Choose a reason for hiding this comment

bobylito commented Nov 2, 2017 via email • edited by Haroenv

mthuret commented Nov 2, 2017

bobylito commented Nov 3, 2017 • edited

anonrig commented Nov 16, 2017

bobylito commented Dec 5, 2017

samouss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samouss Dec 6, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bobylito commented Dec 7, 2017

Choose a reason for hiding this comment

samouss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bobylito commented Dec 8, 2017

Choose a reason for hiding this comment

samouss left a comment

Choose a reason for hiding this comment

bobylito commented Oct 31, 2017 •

edited

algobot commented Oct 31, 2017 •

edited

mthuret Nov 2, 2017 •

edited

bobylito commented Nov 2, 2017 via email •

edited by Haroenv

bobylito commented Nov 3, 2017 •

edited

samouss Dec 6, 2017 •

edited