From 7899c00e1b7a1ca615f9e88a32216f3c97b92f72 Mon Sep 17 00:00:00 2001
From: Alexey Safronov <Alexey.Safronov@onlyoffice.com>
Date: Tue, 29 Oct 2019 11:55:31 +0300
Subject: [PATCH] web: Components: Fixed display loading

---
 .../advanced-selector.stories.js              | 36 +++++--------------
 .../sub-components/sections/main/body.js      |  5 ++-
 2 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js b/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
index 7d4671156e..c071873229 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
@@ -88,7 +88,6 @@ const groups = [
 const sizes = ["compact", "full"];
 const displayTypes = ['dropdown', 'aside'];
 
-
 class ADSelectorExample extends React.Component {
   constructor(props) {
     super(props);
@@ -102,12 +101,6 @@ class ADSelectorExample extends React.Component {
       isNextPageLoading: false
     }
 
-    /*faker.seed(123);
-    this.persons = new Array(50)
-      .fill(true)
-      .map(() => ({ name: name.findName() }));
-    this.persons.sort((a, b) => a.name.localeCompare(b.name));*/
-
     this.AllOptions = Array.from({ length: total }, (v, index) => {
       const additional_group = groups[getRandomInt(1, 6)];
       groups[0].total++;
@@ -122,32 +115,19 @@ class ADSelectorExample extends React.Component {
     console.log(this.persons);
   }
 
-  /*loadNextPage = (startIndex, stopIndex) => {
-    this.setState({ isNextPageLoading: true });
-
-    const promise = new Promise((resolve) => {
-      setTimeout(() => {
-        this.setState({
-          hasNextPage: this.AllOptions.length < 100,
-          isNextPageLoading: false
-        });
-
-        resolve(slice(this.AllOptions, startIndex, stopIndex - startIndex));
-      }, 2500);
-    });
-
-    return promise;
-  };*/
-
   loadNextPage = (startIndex, stopIndex) => {
     console.log(`loadNextPage(startIndex=${startIndex}, stopIndex=${stopIndex})`);
     this.setState({ isNextPageLoading: true }, () => {
       setTimeout(() => {
-        this.setState(state => ({
-          hasNextPage: state.options.length < 100,
+        const { options } = this.state;
+        const newOptions = [...options].concat(slice(this.AllOptions, startIndex, startIndex+100))
+
+        this.setState({
+          hasNextPage: newOptions.length < this.props.total,
           isNextPageLoading: false,
-          options: [...state.options].concat(slice(this.AllOptions, startIndex, startIndex+100))
-        }));
+          options: newOptions
+        });
+
       }, 2500);
     });
   };
diff --git a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js
index bc4f6e5d60..32de6dc4fc 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js
@@ -20,14 +20,13 @@ class ADSelectorMainBody extends React.Component {
     let content;
     if (!this.isItemLoaded(index)) {
       content = (
-        <div style={{ display: "inline-block" }}>
+        <div className="option" style={style} key="loader">
           <Loader
             type="oval"
             size={16}
             style={{
               display: "inline",
-              marginRight: "10px",
-              paddingLeft: "10px"
+              marginRight: "10px"
             }}
           />
           <Text.Body as="span">Loading... Please wait...</Text.Body>