loader: error handling

2025-04-25 02:56:41 +07:00 · 2018-12-11 12:44:10 +07:00 · 2018-12-11 12:44:10 +07:00 · 1c014ec9fb
commit 1c014ec9fb
parent 71a0aed9aa
5 changed files with 102 additions and 12 deletions
--- a/src/index.html
+++ b/src/index.html
@ -13,13 +13,55 @@
  <style>
    #loader {
      position: fixed;
-      background: #576066;
+      background: #ecf0ff;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      transition: opacity 1s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #666666;
+      font-family: sans-serif;
+      font-size: 16px;
+      flex-direction: column;
+      font-weight: 500;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    @keyframes blink {
+      0% { opacity: 1; }
+      100% { opacity: 1; }
+    }
+
+    #loader-current {
+      text-transform: uppercase;
+      font-size: 14px;
+    }
+
+    #loader-container {
+      width: 240px;
+      height: 100px;
+    }
+
+    #loader-progress {
+      margin-top: 10px;
+      width: 100%;
+      height: 8px;
+      background: rgba(0, 0, 0, 0.05);
+      box-shadow: inset rgba(0,0,0,0.1) 0 0 0 1px;
+      border-radius: 4px;
+    }
+
+    #loader-bar {
+      background: linear-gradient(90deg, #845b9e, #54faff);
+      width: 10%;
+      height: 100%;
+      border-radius: 4px;
+      transition: width 500ms;
+      animation: blink 0.3s infinite alternate;
    }

    body {
@ -33,11 +75,36 @@
      left: 0;
      top: 0;
    }
+
+    #loader-error {
+      color: white;
+      background: #ff3344;
+      border-radius: 3px;
+      padding: 5px 10px 10px 10px;
+      margin-top: 20px;
+      opacity: 0;
+      font-size: 14px;
+    }
+
+    #loader-error h4 {
+      margin: 5px 0;
+    }
  </style>
 </head>
 <body>
  <canvas id="renderer"></canvas>
  <section id="map" style="position: absolute; width: 100%; height: 100%;"></section>
-  <section id="loader"></section>
+  <section id="loader">
+    <div id="loader-container">
+      <div id="loader-current">ЗАГРУЗКА</div>
+      <div id="loader-progress">
+        <div id="loader-bar"></div>
+      </div>
+      <div id="loader-error">
+        <h4>Хранилище недоступно.</h4>
+        Повторите попытку позже.
+      </div>
+    </div>
+  </section>
  <section id="index"></section>
 </body>
--- a/src/index.js
+++ b/src/index.js
@ -35,9 +35,12 @@ import '$styles/main.less';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { configureStore } from '$redux/store';
+import { pushLoaderState } from '$utils/history';

 const { store, persistor } = configureStore();

+pushLoaderState(10);
+
 export const Index = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
--- a/src/redux/user/sagas.js
+++ b/src/redux/user/sagas.js
@ -6,12 +6,10 @@ import {
  checkUserToken,
  getGuestToken,
  getStoredMap,
-  getVkIframeUser,
-  getVkUserInfo,
  postMap
 } from '$utils/api';
 import {
-  hideRenderer, iframeLoginVk,
+  hideRenderer,
  setActiveSticker, setAddress,
  setChanged, setDialogActive,
  setEditing,
@ -20,7 +18,7 @@ import {
  setSaveOverwrite, setSaveSuccess, setTitle,
  setUser
 } from '$redux/user/actions';
-import { getUrlData, parseQuery, pushPath } from '$utils/history';
+import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath } from '$utils/history';
 import { editor } from '$modules/Editor';
 import { ACTIONS } from '$redux/user/constants';
 import { MODES } from '$constants/modes';
@ -114,6 +112,8 @@ function* iframeLoginVkSaga({ viewer_id, access_token, auth_key }) {
 }

 function* mapInitSaga() {
+  pushLoaderState(90);
+
  const { hash } = getUrlData();

  if (hash && /^#map/.test(hash)) {
@ -146,25 +146,29 @@ function* mapInitSaga() {

  yield call(startEmptyEditorSaga);
  yield put(setReady(true));
+
+  pushLoaderState(100);
+
  return true;
 }

 function* authCheckSaga() {
+  pushLoaderState(70);
+
  const { id, token } = yield select(getUser);
+  const { ready } = yield select(getState);

  if (window.location.search || true) {
    const { viewer_id, auth_key } = yield parseQuery(window.location.search);
-    // https://alpha-map.vault48.org:3000/auth/iframe/vk?viewer_id=360004&access_token=e558a05d5cb1fcb195316703a2d5e5ec9d19b2c608844c986ec56798f8ac642379bb37fbc58270435e077&auth_key=b0ff47f659d21b6b880a1eee60b6e794
-    // const viewer_id = '360004';
-    // const auth_key = 'b0ff47f659d21b6b880a1eee60b6e794';
-
-    // console.log('Already logged in?', viewer_id, auth_key, id !== `vk:${viewer_id}`);

    if (viewer_id && auth_key && id !== `vk:${viewer_id}`) {
      const user = yield call(checkIframeToken, { viewer_id, auth_key });

      if (user) {
        yield put(setUser(user));
+
+        pushLoaderState('   ...готово');
+
        return yield call(mapInitSaga);
      }
    }
@ -175,11 +179,19 @@ function* authCheckSaga() {

    if (user) {
      yield put(setUser(user));
+
+      pushLoaderState('   ...готово');
+
      return yield call(mapInitSaga);
+    } else if (!ready) {
+      pushNetworkInitError();
    }
  }

  yield call(generateGuestSaga);
+
+  pushLoaderState(80);
+
  return yield call(mapInitSaga);
 }

--- a/src/utils/api.js
+++ b/src/utils/api.js
@ -11,7 +11,7 @@ export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, {
  id,
  token,
  routes: (result.data.routes && result.data.routes.length > 0 && arrayToObject(result.data.routes, '_id')) || {},
-}));
+})).catch(() => null);

 export const getGuestToken = () => axios.get(API.GET_GUEST).then(result => (result && result.data));

--- a/src/utils/history.js
+++ b/src/utils/history.js
@ -26,3 +26,11 @@ export const parseQuery = (queryString: string) => {
  }
  return params;
 };
+
+export const pushLoaderState = state => {
+  document.getElementById('loader-bar').style.width = `${state}%`;
+};
+
+export const pushNetworkInitError = state => {
+  document.getElementById('loader-error').style.opacity = 1;
+};