adds global spinner

app/javascript/packs/app/action_types.js

@@ -25,5 +25,9 @@ export const CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL =
   "CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL";
 
 // user teams
-export const LEAVE_TEAM = "LEAVE_TEAM"
-export const SHOW_LEAVE_TEAM_MODAL = "SHOW_LEAVE_TEAM_MODAL"
+export const LEAVE_TEAM = "LEAVE_TEAM";
+export const SHOW_LEAVE_TEAM_MODAL = "SHOW_LEAVE_TEAM_MODAL";
+
+// spinner
+export const SPINNER_ON = "SPINNER_ON";
+export const SPINNER_OFF = "SPINNER_OFF";

app/javascript/packs/shared/Spinner.jsx

@@ -1,3 +1,44 @@
-import React from "react";
+import React, { Component } from "react";
+import { bool } from "prop-types";
+import { connect } from "react-redux";
+import styled from "styled-components";
 
-export default () => <i className="fa fa-spinner" aria-hidden="true" />;
+const Wrapper = styled.div`
+  background-color: rgba(0, 0, 0, 0.2);
+  opaciti: 0.5;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  .center-box {
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+class Spinner extends Component {
+  render() {
+    let spinner = <div />;
+    if (this.props.spinner_on) {
+      spinner = (
+        <Wrapper>
+          <div className="center-box">
+            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" />
+          </div>
+        </Wrapper>
+      );
+    }
+
+    return spinner;
+  }
+}
+
+Spinner.propTypes = {
+  spinner_on: bool.isRequired
+};
+
+const mapStateToProps = state => state.global_activities;
+
+export default connect(mapStateToProps, {})(Spinner);

app/javascript/packs/shared/actions/ActivitiesActions.js

@@ -2,7 +2,9 @@ import axios from "../../app/axios";
 import { ACTIVITIES_PATH } from "../../app/routes";
 import {
   GLOBAL_ACTIVITIES_DATA,
-  DESTROY_GLOBAL_ACTIVITIES_DATA
+  DESTROY_GLOBAL_ACTIVITIES_DATA,
+  SPINNER_ON,
+  SPINNER_OFF
 } from "../../app/action_types";
 
 function addActivitiesData(data) {
@@ -31,3 +33,15 @@ export function getActivities(lastId = 0) {
       });
   };
 }
+
+export function spinnerOn() {
+  return {
+    type: SPINNER_ON
+  };
+}
+
+export function spinnerOff() {
+  return {
+    type: SPINNER_OFF
+  };
+}

app/javascript/packs/shared/reducers/ActivitiesReducers.js

@@ -1,9 +1,11 @@
 import {
   GLOBAL_ACTIVITIES_DATA,
-  DESTROY_GLOBAL_ACTIVITIES_DATA
+  DESTROY_GLOBAL_ACTIVITIES_DATA,
+  SPINNER_OFF,
+  SPINNER_ON
 } from "../../app/action_types";
 
-const initialStateu = { more: true, activities: [] };
+const initialStateu = { more: true, activities: [], spinner_on: false };
 
 export function globalActivities(state = initialStateu, action) {
   switch (action.type) {
@@ -21,6 +23,10 @@ export function globalActivities(state = initialStateu, action) {
         ...state,
         ...initialStateu
       };
+    case SPINNER_OFF:
+      return Object.assign({}, state, { spinner_on: false });
+    case SPINNER_ON:
+      return Object.assign({}, state, { spinner_on: true });
     default:
       return state;
   }

app/javascript/packs/src/settings/app.jsx

@@ -5,6 +5,7 @@ import { Provider } from "react-redux";
 import { IntlProvider, addLocaleData } from "react-intl";
 import enLocaleData from "react-intl/locale-data/en";
 
+import Spinner from "../../shared/Spinner";
 import { flattenMessages } from "../../locales/utils";
 import store from "../../app/store";
 import messages from "../../locales/messages";
@@ -19,6 +20,7 @@ const SettingsPage = () =>
   <div>
     <MainNav />
     <ModalsContainer />
+    <Spinner />
   </div>;
 
 document.addEventListener("DOMContentLoaded", () => {