added loading more spinner

src/actions/files.js

@@ -1,5 +1,5 @@
 import {addUpload, editUpload, cancelUpload} from "./uploads";
-import {loadMoreItems, setLoading} from "./main"
+import {loadMoreItems, setLoading, setLoadingMoreItems} from "./main"
 import {resetSelected} from "./selectedItem";
 import {addQuickFile, startSetQuickFiles, setQuickFiles} from "./quickFiles";
 import {startSetStorage} from "./storage"
@@ -296,6 +296,8 @@ export const startLoadMoreFiles = (parent="/", sortby="DEFAULT", search="", star
 
         //dispatch(setLoading(true))
 
+        dispatch(setLoadingMoreItems(true));
+
         let limit = window.localStorage.getItem("list-size") || 50
         limit = parseInt(limit)
 
@@ -314,6 +316,7 @@ export const startLoadMoreFiles = (parent="/", sortby="DEFAULT", search="", star
                     dispatch(loadMoreItems(true))
                 }
              
+                dispatch(setLoadingMoreItems(false));
                 //dispatch(setLoading(false))
 
             }).catch((err) => {
@@ -336,7 +339,8 @@ export const startLoadMoreFiles = (parent="/", sortby="DEFAULT", search="", star
                     dispatch(loadMoreItems(true))
                 }
                 
-                dispatch(setLoading(false))
+                // dispatch(setLoading(false))
+               dispatch(setLoadingMoreItems(false));
     
             }).catch((err) => {
                 console.log(err)

src/actions/main.js

@@ -71,6 +71,11 @@ export const setRightSectionMode = (mode) => ({
     mode
 })
 
+export const setLoadingMoreItems = (loading) => ({
+    type: "LOADING_MORE_ITEMS",
+    loading
+})
+
 // export const resetSettingsMain = (id) => ({
 //     type: "RESET_SETTINGS_MAIN",
 //     id

src/components/Dataform/DataForm.js

@@ -4,6 +4,7 @@ import React from "react";
 import QuickAccess from "../QuickAccess";
 import ParentBar from "../ParentBar";
 import Spinner from "../Spinner";
+import SpinnerImage from "../SpinnerImage";
 
 const DataForm = (props) => (
   <div className={props.parent === "/" ? "file__control--panel" : "file__control--panel folder__view"}>
@@ -122,8 +123,12 @@ const DataForm = (props) => (
             />
           ))}
         </table> 
-}
+        }
 
+        <div className="dataform-loadmore-files" style={props.loadingMoreItems ? {} : {display: "none"}}>
+          <SpinnerImage />
+        </div>
+  
         {/* {props.loading ? 
         <div className="dataform__spinner__wrapper">
           <Spinner />

src/components/Dataform/index.js

@@ -44,7 +44,7 @@ class DataFormContainer extends React.Component {
             
             const date = new Date();
 
-            if (this.props.loadMoreItems && this.timeout < date.getTime() && !this.props.loading) {
+            if (this.props.loadMoreItems && this.timeout < date.getTime() && !this.props.loadingMoreItems) {
                 this.timeout = date.getTime() + 500;
                 this.loadMoreItems();
             } else {
@@ -145,7 +145,8 @@ const mapStateToProp = (state) => ({
     search: state.filter.search,
     isGoogle: state.filter.isGoogle,
     loadMoreItems: state.main.loadMoreItems,
-    loading: state.main.loading
+    loading: state.main.loading,
+    loadingMoreItems: state.main.loadingMoreItems
 })
 
 export default connect(mapStateToProp)(DataFormContainer);

src/reducers/main.js

@@ -14,6 +14,7 @@ const defaultState = {
     uploadOverlayOpen: false,
     leftSectionMode: "",
     rightSectionMode: "",
+    loadingMoreItems: false
     // resetSettingsMain: "",
 }
 
@@ -32,6 +33,14 @@ export default (state = defaultState, action) => {
 
         // }
 
+        case "LOADING_MORE_ITEMS": {
+            
+            return {
+                ...state,
+                loadingMoreItems: action.loading
+            }
+        }
+
         case "SET_LEFT_SECTION_MODE": {
 
             return {

src/styles/components/_Dataform.scss

@@ -22,4 +22,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.dataform-loadmore-files {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 17px;
 }