Merge pull request #145 from namecheap/spinnerDoc

chore: doc to include spinner

docs/animation_during_reroute.md

@@ -0,0 +1,69 @@
+# Animation during reroute
+
+## Demo 
+![Animation during reroute](./assets/demoSpinner.gif)
+
+
+## Implementation details
+- Spinner appears only if transition from one route to another took more then 200ms.
+- During transition ILC remove original MSs immediately and place fake cloned nodes to DOM, which in relust don't have 
+any JS mouse listeners. so we strongly recommend to use backdrop for spinner. 
+In any case, additionally it will cover any your bugs regarding interaction users with site during rerouting.
+
+## How to
+You can use your own spinner by setting `tmplSpinner` property of `ilcConfig` in your main html template.
+Example:
+```html
+<!-- ILC spinner stylesheets -->
+<style type="text/css">
+    .ilc-spinner {
+        position: fixed;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+        background: rgba(255,255,255,0.4);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .ilc-spinner .ilc-spinner__loader {
+        display: block;
+        width: 30px;
+        height: 30px;
+    }
+
+    @keyframes gb-spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .ilc-spinner .ilc-spinner__loader::after {
+        display: block;
+        width: 30px;
+        height: 30px;
+        border: 3px solid;
+        border-radius: 50%;
+        animation: gb-spin 1s linear infinite;
+        content: "";
+        border-color: #8cc1c1 #6d6e70 #6d6e70 #6d6e70;
+    }
+</style>
+
+<script>
+    window.ilcConfig = {
+        tmplSpinner:
+            '<div class="ilc-spinner">' +
+                '<div class="ilc-spinner__loader"></div>' +
+            '</div>'
+        ,
+    }
+</script>
+```

docs/ilc_app_interface.md

@@ -59,4 +59,5 @@ See more information about the [lifecycle functions here](https://single-spa.js.
 * `domElementGetter(): HTMLElement` - returns ref to `HTMLElement` that should be used as container to render app's content
 * `getCurrentPathProps(): {}` - returns _Props_ that were defined for current path
 * `getCurrentBasePath(): string` - returns same value as `basePath` param in `routerProps` query parameter
-* `errorHandler(error, errorInfo = {}): void` - app MUST use it to propagate all unhandled errors
+* `errorHandler(error, errorInfo = {}): void` - app MUST use it to propagate all unhandled errors
+

ilc/client.js

@@ -3,7 +3,7 @@ import * as singleSpa from 'single-spa';
 import Router from './common/router/ClientRouter';
 import setupErrorHandlers from './client/errorHandler/setupErrorHandlers';
 import {fragmentErrorHandlerFactory, crashIlc} from './client/errorHandler/fragmentErrorHandlerFactory';
-import { renderFakeSlot, addContentListener } from './client/pageTransitions';
+import handlePageTransaction from './client/handlePageTransaction';
 import initSpaConfig from './client/initSpaConfig';
 import setupPerformanceMonitoring from './client/performance';
 import selectSlotsToRegister from './client/selectSlotsToRegister';
@@ -75,9 +75,9 @@ function isActiveFactory(appName, slotName) {
         let isActive = checkActivity(router.getCurrentRoute());
         const wasActive = checkActivity(router.getPrevRoute());
 
-        const willBeRendered = !wasActive && isActive;
-        const willBeRemoved = wasActive && !isActive;
-        let willBeRerendered = false;
+        let willBe;
+        !wasActive && isActive && (willBe = 'rendered');
+        wasActive && !isActive && (willBe = 'removed');
 
         if (isActive && wasActive && reload === false) {
             const oldProps = router.getPrevRouteProps(appName, slotName);
@@ -95,17 +95,12 @@ function isActiveFactory(appName, slotName) {
                 });
 
                 isActive = false;
-                willBeRerendered = true;
+                willBe = 'rerendered';
             }
         }
 
-        if (willBeRendered) {
-            addContentListener(slotName);
-        } else if (willBeRemoved) {
-            renderFakeSlot(slotName);
-        } else if (willBeRerendered) {
-            renderFakeSlot(slotName);
-            addContentListener(slotName);
+        if (window.ilcConfig && window.ilcConfig.tmplSpinner) {
+            willBe && handlePageTransaction(slotName, willBe);
         }
 
         reload = false;

ilc/client/pageTransitions.js → ilc/client/handlePageTransaction.js

@@ -44,7 +44,7 @@ const onAllSlotsLoaded = () => {
     window.dispatchEvent(new CustomEvent('ilc:all-slots-loaded'));
 };
 
-export const addContentListener = slotName => {
+const addContentListener = slotName => {
     runGlobalSpinner();
 
     if (window.location.hash) {
@@ -67,7 +67,7 @@ export const addContentListener = slotName => {
     observer.observe(targetNode, { childList: true });
 };
 
-export const renderFakeSlot = slotName => {
+const renderFakeSlot = slotName => {
     const targetNode = getSlotElement(slotName);
     const clonedNode = targetNode.cloneNode(true);
     clonedNode.removeAttribute('id');
@@ -77,3 +77,20 @@ export const renderFakeSlot = slotName => {
     targetNode.style.display = 'none'; // we hide old slot because fake already in the DOM.
     hiddenSlots.push(targetNode);
 };
+
+/**
+ * @param {string} slotName
+ * @param {string} willBe - possible values: rendered, removed, rerendered
+ */
+export default function (slotName, willBe) {
+    if (!slotName || !willBe) return;
+
+    if (willBe === 'rendered') {
+        addContentListener(slotName);
+    } else if (willBe === 'removed') {
+        renderFakeSlot(slotName);
+    } else if (willBe === 'rerendered') {
+        renderFakeSlot(slotName);
+        addContentListener(slotName);
+    }
+}