web: Components: Fixed display loading

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);
     });
   };

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>