@ebay/muse-lib-react 1.3.0

package/src/features/sub-app/FixedSubAppContainer.js

@@ -0,0 +1,142 @@
+/**
+ * Allows a plugin to easily integrate a sub app. It does below things:
+ * - Load sub app
+ * - URL sync
+ * - SSO Check
+ * - Communication
+ *
+ * FixedSubAppContainer is usually only used programatically, not by configure.
+ *
+ * The owner should handle the size of the sub app.
+ */
+
+import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
+import { useLocation } from 'react-use';
+import _ from 'lodash';
+import history from '../../common/history';
+import urlUtils from './urlUtils';
+import { LoadingSkeleton, C2SProxyFailed } from './';
+
+const debouncedPush = _.debounce(url => {
+  history.push(url);
+});
+
+// Map a url pattern to load another muse app in iframe
+// For example: /groot-ui => https://grootapp.muse.vip.ebay.com
+// It will sync path, querystring, hash between the parent and iframe
+const msgEngine = window.MUSE_GLOBAL.msgEngine;
+
+// Fixed sub app container is usualle embeded into some part of an app but not the full page
+export default function FixedSubAppContainer({ context = null, subApp }) {
+  const iframeWrapper = useRef();
+  const [subAppState, setSubAppState] = useState();
+  const loc = useLocation();
+  // parentFullPath: https://cloud.ebay.com/app/musemanager/ecdx => /app/musemanager/ecdx
+  const parentFullPath = loc.href.replace(loc.origin, '');
+
+  // Get the sub app's path
+  const subPath = urlUtils.getChildUrlPath(subApp);
+  console.log('subPath', subPath);
+  const currentIframe = iframeWrapper.current?.firstChild;
+
+  const subUrl = `${urlUtils.getOrigin(subApp.url)}${subPath}`;
+  // When context is changed, send message to the child app
+  useEffect(() => {
+    if (iframeWrapper.current && subAppState === 'app-loaded') {
+      msgEngine?.sendToChild(
+        {
+          type: 'sub-app-context-change',
+          data: context,
+        },
+        currentIframe,
+      );
+    }
+  }, [context, subApp, currentIframe, subAppState]);
+
+  // When sub app is first loaded, set the sub app url
+  useEffect(() => {
+    if (!subPath || !iframeWrapper.current) return;
+
+    // when first load, create iframe node to load sub app
+    let iframe = iframeWrapper.current?.firstChild;
+    if (!iframe) {
+      iframe = document.createElement('iframe');
+      iframe.src = subUrl;
+      iframeWrapper.current.appendChild(iframe);
+    }
+  }, [subUrl, subPath]);
+
+  // Whenever parent path is changed, notify child iframe (sub app)
+  useEffect(() => {
+    if (!currentIframe || !subPath) return;
+
+    msgEngine?.sendToChild(
+      {
+        type: 'parent-route-change',
+        path: subPath,
+        url: subPath, // use url to make it compatible with old muse-react
+      },
+      currentIframe,
+    );
+  }, [subPath, currentIframe]);
+
+  // handle sub app messages: route change, app load status, etc...
+  const handleSubAppMsg = useCallback(
+    msg => {
+      if (!msg.type) return;
+      // Here msg.path is the full path of sub app
+      if (msg.type === 'child-route-change' && msg.path) {
+        const newParentFullPath = urlUtils.getParentPath(msg.path, subApp);
+        if (newParentFullPath !== parentFullPath && newParentFullPath) {
+          // Need debounce because there maybe quick redirect of the sub app which may cause endless loop
+          debouncedPush(newParentFullPath);
+        }
+      } else if (msg.type === 'app-state-change') {
+        setSubAppState(msg.state);
+        if (msg.state === 'app-loaded') {
+          // for first load, need to set context to child
+          msgEngine?.sendToChild(
+            {
+              type: 'sub-app-context-change',
+              data: context,
+            },
+            currentIframe,
+          );
+          currentIframe.museLoaded = true;
+        }
+      }
+    },
+    [subApp, parentFullPath, setSubAppState, context, currentIframe],
+  );
+
+  useEffect(() => {
+    const k = Math.random();
+    msgEngine?.addListener(k, handleSubAppMsg);
+    return () => msgEngine?.removeListener(k);
+  }, [handleSubAppMsg]);
+
+  return (
+    <div className="muse-react_sub-app-fixed-sub-app-container">
+      {!currentIframe?.museLoaded &&
+        subAppState !== 'app-loaded' &&
+        subAppState !== 'app-failed' &&
+        subAppState !== 'login-page' &&
+        subAppState !== 'check-c2s-proxy-failed' && <LoadingSkeleton state={subAppState} />}
+
+      {subAppState === 'app-failed' && (
+        <div className="sub-app-sub-app-failed">
+          Failed to start sub app {subApp.name}: /{subApp.path} =&gt; {subApp.url}.
+        </div>
+      )}
+      {subAppState === 'check-c2s-proxy-failed' && <C2SProxyFailed />}
+
+      <div
+        ref={iframeWrapper}
+        style={{
+          visibility: ['app-loaded', 'login-page'].includes(subAppState) ? 'visible' : 'hidden',
+        }}
+        className="sub-app-iframe-wrapper"
+      />
+    </div>
+  );
+}

package/src/features/sub-app/FixedSubAppContainer.less

@@ -0,0 +1,12 @@
+.muse-react_sub-app-fixed-sub-app-container {
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    margin: 0;
+  }
+
+  > div {
+    height: ~'calc(100vh - 200px)';
+  }
+}

package/src/features/sub-app/LoadingSkeleton.js

@@ -0,0 +1,21 @@
+/* eslint jsx-a11y/heading-has-content: 0*/
+import React from 'react';
+import { ReactComponent as LoadingSvg } from './subAppLoading2.svg';
+const stateMap = {
+  'app-starting': 'Loading sub app...',
+  'app-loading': 'Starting sub app...',
+  'fetch-user-info': 'Fetching user info...',
+  'app-begin-login': 'Checking authentication...',
+  'check-c2s-proxy': 'Checking c2s proxy...',
+  // 'redirect-login': 'Redirecting to login page...',
+};
+export default function LoadingSkeleton({ state }) {
+  return (
+    <div className="sub-app-loading-skeleton">
+      <div className="sub-app-loading-center-container">
+        {LoadingSvg ? React.createElement(LoadingSvg) : <></>}
+        <label>{stateMap[state] || 'Loading sub app...'}</label>
+      </div>
+    </div>
+  );
+}

package/src/features/sub-app/LoadingSkeleton.less

@@ -0,0 +1,20 @@
+@import '../../styles/mixins';
+
+.sub-app-loading-skeleton {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1200;
+  background: #fff;
+  display: grid;
+  place-items: center;
+  svg {
+    width: 80px;
+    height: 80px;
+  }
+  label {
+    color: #777;
+    display: inline-block;
+    margin-top: 10px;
+  }
+}

package/src/features/sub-app/SubAppContainer.js

@@ -0,0 +1,203 @@
+/**
+ * Allows a plugin to easily integrate a sub app. It does below things:
+ * - Load sub app
+ * - URL sync
+ * - SSO Check
+ * - Communication
+ * - Cache pages
+ * - Auto resize iframe
+ *
+ * For example:
+ * Sub apps configured in muse-react plugin:
+ * [
+ *   {
+ *     path: '/muse-apps', // no array. Support regex: /app/.* /someapp
+ *     url: 'https://demo.muse.vip.ebay.com/muse-apps',
+ *     persist: false,
+ *     name: 'musedemo',
+ *     env: 'production',
+ *   }
+ * ]
+ */
+import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
+import { useLocation, useEvent } from 'react-use';
+import _ from 'lodash';
+import history from '../../common/history';
+import urlUtils from './urlUtils';
+import { LoadingSkeleton, C2SProxyFailed } from './';
+
+const debouncedPush = _.debounce(url => {
+  history.push(url);
+});
+
+// Map a url pattern to load another muse app in iframe
+// For example: /groot-ui => https://grootapp.muse.vip.ebay.com
+// It will sync path, querystring, hash between the parent and iframe
+const msgEngine = window.MUSE_GLOBAL.msgEngine;
+const iframeCache = {};
+
+export default function SubAppContainer({ context = null, subApp }) {
+  const iframeWrapper = useRef();
+  const [subAppState, setSubAppState] = useState();
+  const loc = useLocation();
+  const parentFullPath = loc.href.replace(loc.origin, '');
+  const subPath = urlUtils.getChildUrlPath(subApp);
+  const currentIframe = iframeCache[subApp.url];
+
+  const subUrl = `${urlUtils.getOrigin(subApp.url)}${subPath}`;
+  // When context is changed, send message to the child app
+  useEffect(() => {
+    if (iframeWrapper.current && subAppState === 'app-loaded') {
+      msgEngine?.sendToChild(
+        {
+          type: 'sub-app-context-change',
+          data: context,
+        },
+        currentIframe, //iframeWrapper.current.firstChild,
+      );
+    }
+  }, [context, subApp, currentIframe, subAppState]);
+
+  // When current sub app is changed
+  // If not persist, delete old app:
+  //   - delete iframe
+  //   - delete app state
+  // If persist:
+  //   - cache iframe and state: but the post message will pause?
+
+  // while iframe is loaded, ensure it's a muse app
+  const assertMuseApp = useCallback(async ifr => {
+    try {
+      await window.MUSE_GLOBAL?.msgEngine.assertMuseApp(ifr);
+    } catch (err) {
+      console.log('Not a muse app: ', err);
+      setSubAppState('not-a-muse-app');
+    }
+  }, []);
+
+  // Handle subapp iframe visibility
+  useEffect(() => {
+    if (!subPath || !iframeWrapper.current) return;
+
+    // when first load, create iframe node to load sub app
+    let iframe = iframeCache[subApp.url];
+    const rect = iframeWrapper.current.getBoundingClientRect();
+    if (!iframe) {
+      iframe = document.createElement('iframe');
+      iframe.src = subUrl;
+      iframe.onload = () => assertMuseApp(iframe);
+      iframeCache[subApp.url] = iframe;
+      Object.assign(iframe.style, {
+        position: 'fixed',
+        top: rect.top + 'px',
+        left: rect.left + 'px',
+        width: rect.width + 'px',
+        height: rect.height + 'px',
+        border: 'none',
+        zIndex: 1000,
+        margin: 0,
+      });
+      document.body.appendChild(iframe);
+    } else {
+      iframe.style.left = rect.left + 'px';
+    }
+  }, [subUrl, assertMuseApp, subPath, subApp.url]);
+
+  // Whenever parent path is changed, notify child iframe (sub app)
+  useEffect(() => {
+    if (!currentIframe) return;
+    msgEngine?.sendToChild(
+      {
+        type: 'parent-route-change',
+        path: subPath,
+      },
+      currentIframe,
+    );
+  }, [subPath, currentIframe]);
+
+  useEffect(() => {
+    return () => {
+      const iframe = iframeCache[subApp.url];
+      if (iframe) {
+        iframe.style.left = '-100000px';
+      }
+    };
+  }, [subApp.url]);
+
+  const onWindowResize = useCallback(() => {
+    const iframe = iframeCache[subApp.url];
+
+    if (iframe && iframeWrapper.current) {
+      const rect = iframeWrapper.current.getBoundingClientRect();
+      Object.assign(iframe.style, {
+        width: rect.width + 'px',
+        height: rect.height + 'px',
+      });
+    }
+  }, [subApp.url]);
+
+  useEvent('resize', onWindowResize);
+
+  // handle sub app messages: route change, app load status, etc...
+  const handleSubAppMsg = useCallback(
+    msg => {
+      if (!msg.type) return;
+      // Here msg.path is the full path of sub app
+      if (msg.type === 'child-route-change' && msg.path) {
+        const newParentFullPath = urlUtils.getParentPath(msg.path, subApp);
+        if (newParentFullPath !== parentFullPath) {
+          // Need debounce because there maybe quick redirect of the sub app which may cause endless loop
+          debouncedPush(newParentFullPath);
+        }
+      } else if (msg.type === 'app-state-change') {
+        setSubAppState(msg.state);
+        if (msg.state === 'app-loaded') {
+          // for first load, need to set context to child
+          msgEngine?.sendToChild(
+            {
+              type: 'sub-app-context-change',
+              data: context,
+            },
+            currentIframe,
+          );
+          currentIframe.museLoaded = true;
+        }
+      }
+    },
+    [subApp, parentFullPath, setSubAppState, context, currentIframe],
+  );
+
+  useEffect(() => {
+    const k = Math.random();
+    msgEngine?.addListener(k, handleSubAppMsg);
+    return () => msgEngine?.removeListener(k);
+  }, [handleSubAppMsg]);
+
+  if (!subPath) {
+    return 'Error: can not detect a sub app. Are you using sub app container correctly?';
+  }
+  return (
+    <div className="muse-react_sub-app-sub-app-container">
+      {!currentIframe?.museLoaded &&
+        subAppState !== 'app-loaded' &&
+        subAppState !== 'app-failed' &&
+        subAppState !== 'login-page' &&
+        subAppState !== 'check-c2s-proxy-failed' && <LoadingSkeleton state={subAppState} />}
+
+      {subAppState === 'app-failed' && (
+        <div className="sub-app-sub-app-failed">
+          Failed to start sub app {subApp.name}: /{subApp.path} =&gt; {subApp.url}.
+        </div>
+      )}
+      {subAppState === 'check-c2s-proxy-failed' && <C2SProxyFailed />}
+
+      <div
+        ref={iframeWrapper}
+        style={{
+          visibility: ['app-loaded', 'login-page'].includes(subAppState) ? 'visible' : 'hidden',
+        }}
+        className="sub-app-iframe-wrapper"
+      />
+    </div>
+  );
+}

package/src/features/sub-app/SubAppContainer.less

@@ -0,0 +1,29 @@
+@import '../../styles/mixins';
+
+.muse-react_sub-app-sub-app-container {
+  height: 100vh;
+  position: relative;
+  .sub-app-sub-app-failed {
+    color: red;
+    padding: 16px;
+  }
+  .sub-app-iframe-wrapper {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  iframe {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+
+.muse-layout_home-main-layout-page-container > .sub-app-sub-app-container {
+  margin: -30px;
+  width: ~'calc(100% + 60px)';
+  height: ~'calc(100vh - 50px)';
+}

package/src/features/sub-app/SubAppContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const SubAppContext = React.createContext();
+export default SubAppContext;

package/src/features/sub-app/hooks/useParentRouteChange.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function useParentRouteChange() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    window.MUSE_GLOBAL?.msgEngine?.addListener('muse-react_history', msg => {
+      // Parent may notify the child iframe to update url: implemented in SubAppContainer
+      // muse-boot will notify parent when child iframe url changed
+      const currentPath = document.location.href.replace(document.location.origin, '');
+      if (msg.type === 'parent-route-change' && msg.path !== currentPath) {
+        console.log('parent-route-change: ', msg.path);
+        navigate(msg.path);
+      }
+    });
+    return () => {
+      window.MUSE_GLOBAL?.msgEngine?.removeListener('muse-react_history');
+    };
+  }, [navigate]);
+}
+
+export default useParentRouteChange;

package/src/features/sub-app/index.js

@@ -0,0 +1,5 @@
+export { default as SubAppContainer } from './SubAppContainer';
+export { default as FixedSubAppContainer } from './FixedSubAppContainer';
+export { default as LoadingSkeleton } from './LoadingSkeleton';
+export { default as SubAppContext } from './SubAppContext';
+export { default as C2SProxyFailed } from './C2SProxyFailed';

package/src/features/sub-app/redux/actions.js

@@ -0,0 +1 @@
+export { setSubAppState } from './setSubAppState';

package/src/features/sub-app/redux/constants.js

@@ -0,0 +1,2 @@
+export const SUB_APP_SET_SUB_APP_STATE = 'SUB_APP_SET_SUB_APP_STATE';
+export const SUB_APP_CLEAR_SUB_APP_STATE = 'SUB_APP_CLEAR_SUB_APP_STATE';

package/src/features/sub-app/redux/hooks.js

@@ -0,0 +1 @@
+export { useSetSubAppState } from './setSubAppState';

package/src/features/sub-app/redux/initialState.js

@@ -0,0 +1,12 @@
+// Initial state is the place you define all initial values for the Redux store of the feature.
+// In the 'standard' way, initialState is defined in reducers: http://redux.js.org/docs/basics/Reducers.html
+// But when application grows, there will be multiple reducers files, it's not intuitive what data is managed by the whole store.
+// So Rekit extracts the initial state definition into a separate module so that you can have
+// a quick view about what data is used for the feature, at any time.
+
+// NOTE: initialState constant is necessary so that Rekit could auto add initial state when creating async actions.
+const initialState = {
+  subAppState: {},
+};
+
+export default initialState;

package/src/features/sub-app/redux/reducer.js

@@ -0,0 +1,25 @@
+// This is the root reducer of the feature. It is used for:
+//   1. Load reducers from each action in the feature and process them one by one.
+//      Note that this part of code is mainly maintained by Rekit, you usually don't need to edit them.
+//   2. Write cross-topic reducers. If a reducer is not bound to some specific action.
+//      Then it could be written here.
+// Learn more from the introduction of this approach:
+// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
+
+import initialState from './initialState';
+import { reducer as setSubAppStateReducer } from './setSubAppState';
+
+const reducers = [
+  setSubAppStateReducer,
+];
+
+export default function reducer(state = initialState, action) {
+  let newState;
+  switch (action.type) {
+    // Handle cross-topic actions here
+    default:
+      newState = state;
+      break;
+  }
+  return reducers.reduce((s, r) => r(s, action), newState);
+}

package/src/features/sub-app/redux/setSubAppState.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SUB_APP_SET_SUB_APP_STATE, SUB_APP_CLEAR_SUB_APP_STATE } from './constants';
+
+export function setSubAppState(state) {
+  return {
+    type: SUB_APP_SET_SUB_APP_STATE,
+    data: state,
+  };
+}
+
+export function clearSubAppState() {
+  return {
+    type: SUB_APP_CLEAR_SUB_APP_STATE,
+  };
+}
+
+export function useSetSubAppState() {
+  const dispatch = useDispatch();
+  const subAppState = useSelector(state => state.subApp.subAppState);
+  const boundAction = useCallback((...params) => dispatch(setSubAppState(...params)), [dispatch]);
+  const boundClearSubAppState = useCallback((...params) => dispatch(clearSubAppState(...params)), [
+    dispatch,
+  ]);
+  return { subAppState, setSubAppState: boundAction, clearSubAppState: boundClearSubAppState };
+}
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case SUB_APP_SET_SUB_APP_STATE:
+      return {
+        ...state,
+        subAppState: action.data,
+      };
+    case SUB_APP_CLEAR_SUB_APP_STATE:
+      return {
+        ...state,
+        subAppState: {},
+      };
+    default:
+      return state;
+  }
+}

package/src/features/sub-app/route.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SubAppContainer } from './';
+
+// Get sub app route defined in muse-react plugin
+const subAppsRoute = [];
+const pMuseLibReact = window.MUSE_GLOBAL?.plugins?.find(p => p.name === '@ebay/muse-lib-react');
+// pMuseLibReact.config = {
+//   subApps: [
+//     {
+//       mountPoint: 'default',
+//       name: 'musedemo',
+//       path: '/demo',
+//       // persist: true,
+//       url: 'https://demo.muse.qa.ebay.com',
+//       // url: 'http://local.cloud.ebay.com:3031',
+//       // url: 'https://sam.muse.vip.ebay.com',
+//       // url: 'https://besconsole.muse.qa.ebay.com',
+//     },
+//   ],
+// };
+
+pMuseLibReact?.subApps
+  ?.filter(s => s.mountPoint === 'default' || !s.mountPoint)
+  ?.forEach(subApp => {
+    // console.log('pushing sub app route: ', subApp);
+    subAppsRoute.push({
+      path: subApp.path + '/*',
+      component: () => (
+        <SubAppContainer
+          key={subApp.url} // ensure different sub apps have different iframes
+          subApps={pMuseLibReact?.config?.subApps || []}
+          subApp={subApp}
+        />
+      ),
+    });
+  });
+
+const exportedRoute = {
+  path: 'sub-app',
+  childRoutes: [...subAppsRoute],
+};
+
+export default exportedRoute;

package/src/features/sub-app/style.less

@@ -0,0 +1,5 @@
+@import '../../styles/mixins';
+@import './SubAppContainer';
+@import './FixedSubAppContainer';
+@import './LoadingSkeleton';
+@import './C2SProxyFailed';

package/src/features/sub-app/subAppLoading.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="translate(50 50)"> <g transform="translate(-17 -17) scale(0.5)"> <g>
+<animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" begin="0s" repeatCount="indefinite"></animateTransform><path d="M37.3496987939662 -7 L47.3496987939662 -7 L47.3496987939662 7 L37.3496987939662 7 A38 38 0 0 1 31.359972760794346 21.46047782418268 L31.359972760794346 21.46047782418268 L38.431040572659825 28.531545636048154 L28.531545636048154 38.431040572659825 L21.46047782418268 31.359972760794346 A38 38 0 0 1 7.0000000000000036 37.3496987939662 L7.0000000000000036 37.3496987939662 L7.000000000000004 47.3496987939662 L-6.999999999999999 47.3496987939662 L-7 37.3496987939662 A38 38 0 0 1 -21.46047782418268 31.35997276079435 L-21.46047782418268 31.35997276079435 L-28.531545636048154 38.431040572659825 L-38.43104057265982 28.531545636048158 L-31.359972760794346 21.460477824182682 A38 38 0 0 1 -37.3496987939662 7.000000000000007 L-37.3496987939662 7.000000000000007 L-47.3496987939662 7.000000000000008 L-47.3496987939662 -6.9999999999999964 L-37.3496987939662 -6.999999999999997 A38 38 0 0 1 -31.35997276079435 -21.460477824182675 L-31.35997276079435 -21.460477824182675 L-38.431040572659825 -28.531545636048147 L-28.53154563604818 -38.4310405726598 L-21.4604778241827 -31.35997276079433 A38 38 0 0 1 -6.999999999999992 -37.3496987939662 L-6.999999999999992 -37.3496987939662 L-6.999999999999994 -47.3496987939662 L6.999999999999977 -47.3496987939662 L6.999999999999979 -37.3496987939662 A38 38 0 0 1 21.460477824182686 -31.359972760794342 L21.460477824182686 -31.359972760794342 L28.531545636048158 -38.43104057265982 L38.4310405726598 -28.53154563604818 L31.35997276079433 -21.4604778241827 A38 38 0 0 1 37.3496987939662 -6.999999999999995 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23" fill="#abbd81"></path></g></g> <g transform="translate(0 22) scale(0.4)"> <g>
+<animateTransform attributeName="transform" type="rotate" values="45;0" keyTimes="0;1" dur="0.2s" begin="-0.1s" repeatCount="indefinite"></animateTransform><path d="M37.3496987939662 -7 L47.3496987939662 -7 L47.3496987939662 7 L37.3496987939662 7 A38 38 0 0 1 31.359972760794346 21.46047782418268 L31.359972760794346 21.46047782418268 L38.431040572659825 28.531545636048154 L28.531545636048154 38.431040572659825 L21.46047782418268 31.359972760794346 A38 38 0 0 1 7.0000000000000036 37.3496987939662 L7.0000000000000036 37.3496987939662 L7.000000000000004 47.3496987939662 L-6.999999999999999 47.3496987939662 L-7 37.3496987939662 A38 38 0 0 1 -21.46047782418268 31.35997276079435 L-21.46047782418268 31.35997276079435 L-28.531545636048154 38.431040572659825 L-38.43104057265982 28.531545636048158 L-31.359972760794346 21.460477824182682 A38 38 0 0 1 -37.3496987939662 7.000000000000007 L-37.3496987939662 7.000000000000007 L-47.3496987939662 7.000000000000008 L-47.3496987939662 -6.9999999999999964 L-37.3496987939662 -6.999999999999997 A38 38 0 0 1 -31.35997276079435 -21.460477824182675 L-31.35997276079435 -21.460477824182675 L-38.431040572659825 -28.531545636048147 L-28.53154563604818 -38.4310405726598 L-21.4604778241827 -31.35997276079433 A38 38 0 0 1 -6.999999999999992 -37.3496987939662 L-6.999999999999992 -37.3496987939662 L-6.999999999999994 -47.3496987939662 L6.999999999999977 -47.3496987939662 L6.999999999999979 -37.3496987939662 A38 38 0 0 1 21.460477824182686 -31.359972760794342 L21.460477824182686 -31.359972760794342 L28.531545636048158 -38.43104057265982 L38.4310405726598 -28.53154563604818 L31.35997276079433 -21.4604778241827 A38 38 0 0 1 37.3496987939662 -6.999999999999995 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23" fill="#e15b64"></path></g></g> <g transform="translate(28 4) scale(0.3)"> <g>
+<animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" begin="-0.1s" repeatCount="indefinite"></animateTransform><path d="M37.3496987939662 -7 L47.3496987939662 -7 L47.3496987939662 7 L37.3496987939662 7 A38 38 0 0 1 31.359972760794346 21.46047782418268 L31.359972760794346 21.46047782418268 L38.431040572659825 28.531545636048154 L28.531545636048154 38.431040572659825 L21.46047782418268 31.359972760794346 A38 38 0 0 1 7.0000000000000036 37.3496987939662 L7.0000000000000036 37.3496987939662 L7.000000000000004 47.3496987939662 L-6.999999999999999 47.3496987939662 L-7 37.3496987939662 A38 38 0 0 1 -21.46047782418268 31.35997276079435 L-21.46047782418268 31.35997276079435 L-28.531545636048154 38.431040572659825 L-38.43104057265982 28.531545636048158 L-31.359972760794346 21.460477824182682 A38 38 0 0 1 -37.3496987939662 7.000000000000007 L-37.3496987939662 7.000000000000007 L-47.3496987939662 7.000000000000008 L-47.3496987939662 -6.9999999999999964 L-37.3496987939662 -6.999999999999997 A38 38 0 0 1 -31.35997276079435 -21.460477824182675 L-31.35997276079435 -21.460477824182675 L-38.431040572659825 -28.531545636048147 L-28.53154563604818 -38.4310405726598 L-21.4604778241827 -31.35997276079433 A38 38 0 0 1 -6.999999999999992 -37.3496987939662 L-6.999999999999992 -37.3496987939662 L-6.999999999999994 -47.3496987939662 L6.999999999999977 -47.3496987939662 L6.999999999999979 -37.3496987939662 A38 38 0 0 1 21.460477824182686 -31.359972760794342 L21.460477824182686 -31.359972760794342 L28.531545636048158 -38.43104057265982 L38.4310405726598 -28.53154563604818 L31.35997276079433 -21.4604778241827 A38 38 0 0 1 37.3496987939662 -6.999999999999995 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23" fill="#f8b26a"></path></g></g></g>
+<!-- [ldio] generated by https://loading.io/ --></svg>