save dialog shader

src/components/dialogs/SaveDialog.tsx

@@ -14,6 +14,11 @@ interface Props extends IRootState {
   width: number,
   setMode: typeof setMode,
   sendSaveRequest: typeof sendSaveRequest,
+  save_error: string,
+
+  save_loading: boolean,
+  save_finished: boolean,
+  save_overwriting: boolean,
 }
 
 interface State {
@@ -44,7 +49,6 @@ export class SaveDialog extends React.Component<Props, State> {
 
   setAddress = ({ target: { value } }) => this.setState({ address: (value || '') });
 
-  // cancelSaving = () => this.props.editor.changeMode(MODES.NONE);
   cancelSaving = () => this.props.setMode(MODES.NONE);
 
   sendSaveRequest = (e, force = false) => {
@@ -70,12 +74,14 @@ export class SaveDialog extends React.Component<Props, State> {
 
   render() {
     const { title, is_public } = this.state;
-    const { save_error, save_finished, save_overwriting, width } = this.props;
+    const { save_error, save_finished, save_overwriting, width, save_loading } = this.props;
     const { host, protocol } = getUrlData();
 
     return (
       <div className="control-dialog control-dialog-medium" style={{ width }}>
         <div className="helper save-helper">
+          <div className={classnames('save-loader', { active: save_loading })} />
+
           <div className="save-title">
             <div className="save-title-input">
               <div className="save-title-label">Название</div>

src/redux/user/actions.ts

@@ -31,6 +31,7 @@ export const clearCancel = () => ({ type: ACTIONS.CLEAR_CANCEL });
 export const sendSaveRequest = payload => ({ type: ACTIONS.SEND_SAVE_REQUEST, ...payload });
 export const resetSaveDialog = () => ({ type: ACTIONS.RESET_SAVE_DIALOG });
 
+export const setSaveLoading = save_loading => ({ type: ACTIONS.SET_SAVE_LOADING, save_loading });
 export const setSaveSuccess = payload => ({ type: ACTIONS.SET_SAVE_SUCCESS, ...payload });
 export const setSaveError = save_error => ({ type: ACTIONS.SET_SAVE_ERROR, save_error });
 export const setSaveOverwrite = () => ({ type: ACTIONS.SET_SAVE_OVERWRITE });

src/redux/user/constants.ts

@@ -30,6 +30,7 @@ export const ACTIONS: IActions = {
   CLEAR_CANCEL: 'CLEAR_CANCEL',
 
   SEND_SAVE_REQUEST: 'SEND_SAVE_REQUEST',
+  SET_SAVE_LOADING: 'SET_SAVE_LOADING',
   CANCEL_SAVE_REQUEST: 'CANCEL_SAVE_REQUEST',
   RESET_SAVE_DIALOG: 'RESET_SAVE_DIALOG',
 

src/redux/user/reducer.ts

@@ -39,6 +39,7 @@ interface IRootReducer {
   save_finished: boolean,
   save_overwriting: boolean,
   save_processing: boolean,
+  save_loading: boolean,
 
   dialog: IDialogs[keyof IDialogs],
   dialog_active: boolean,
@@ -147,6 +148,10 @@ const setSaveError: ActionHandler<typeof ActionCreators.setSaveError> = (state,
   ...state, save_error, save_finished: false, save_processing: false
 });
 
+const setSaveLoading: ActionHandler<typeof ActionCreators.setSaveLoading> = (state, { save_loading }) => ({
+  ...state, save_loading
+});
+
 const setSaveOverwrite: ActionHandler<typeof ActionCreators.setSaveOverwrite> = (state) => ({
   ...state,
   save_overwriting: true,
@@ -279,6 +284,7 @@ const HANDLERS = ({
   [ACTIONS.SET_ADDRESS_ORIGIN]: setAddressOrigin,
 
   [ACTIONS.SET_SAVE_ERROR]: setSaveError,
+  [ACTIONS.SET_SAVE_LOADING]: setSaveLoading,
   [ACTIONS.SET_SAVE_OVERWRITE]: setSaveOverwrite,
   [ACTIONS.SET_SAVE_SUCCESS]: setSaveSuccess,
   [ACTIONS.SEND_SAVE_REQUEST]: sendSaveRequest,
@@ -327,6 +333,7 @@ export const INITIAL_STATE: IRootReducer = {
   save_finished: false,
   save_overwriting: false,
   save_processing: false,
+  save_loading: false,
 
   dialog: DIALOGS.NONE,
   dialog_active: false,

src/redux/user/sagas.ts

@@ -17,7 +17,7 @@ import {
   setSaveError,
   setSaveOverwrite, setSaveSuccess, setTitle,
   searchSetTab,
-  setUser, setDialog, setPublic, setAddressOrigin, setProvider, changeProvider, openMapDialog,
+  setUser, setDialog, setPublic, setAddressOrigin, setProvider, changeProvider, openMapDialog, setSaveLoading,
 } from '$redux/user/actions';
 import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath, replacePath } from '$utils/history';
 import { editor } from '$modules/Editor';
@@ -285,6 +285,8 @@ function* sendSaveRequestSaga({
   const { logo, distance } = yield select(getState);
   const { id, token } = yield select(getUser);
 
+  yield put(setSaveLoading(true));
+
   const { result, timeout, cancel } = yield race({
     result: postMap({
       id, token, route, stickers, title, force, address, logo, distance, provider, is_public
@@ -293,6 +295,8 @@ function* sendSaveRequestSaga({
     cancel: take(ACTIONS.RESET_SAVE_DIALOG),
   });
 
+  yield put(setSaveLoading(false));
+
   if (cancel) return yield put(setMode(MODES.NONE));
   if (result && result.mode === 'overwriting') return yield put(setSaveOverwrite());
   if (result && result.mode === 'exists') return yield put(setSaveError(TIPS.SAVE_EXISTS));

src/sprites/icon.svg

@@ -369,6 +369,11 @@
                 <path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
             </g>
 
+            <g id="icon-arrow-up-1" stroke="none">
+                <path stroke="none" fill="black"/>
+                <circle cx="16" cy="16" fill="white" r="4" />
+            </g>
+
             <g id="icon-sad-1" stroke="none">
                 <path stroke="none" fill="black"/>
                 <g transform="translate(4 4)">

src/styles/save.less

@@ -13,6 +13,45 @@
   box-sizing: border-box;
 }
 
+@keyframes jump {
+  0% { transform: translate3d(0, 0, 0) scale(0.5); }
+  100% { transform: translate3d(0, -20px, 0) scale(1); }
+}
+
+.save-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: darken(fade(@blue_secondary, 80%), 20%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 250ms;
+  opacity: 0;
+  touch-action: none;
+  pointer-events: none;
+
+  svg {
+    fill: white;
+
+    &:nth-child(2) { animation-delay: 200ms; }
+    &:nth-child(3) { animation-delay: 400ms; }
+  }
+
+  &.active {
+    opacity: 1;
+    touch-action: all;
+    pointer-events: all;
+
+    svg {
+      animation: jump infinite alternate 600ms;
+    }
+  }
+}
+
 .save-description {
   padding: 5px 10px;
 }