{"version":3,"sources":["lib/styleGuide/shell/basicShell.ts"],"names":[],"mappings":"","file":"../../../../lib/styleGuide/shell/basicShell.d.ts","sourcesContent":["/**\n * Loading shell - the main app should invoke: littleShell.clear()\n */\n(() => {\n  const startTime = Date.now();\n  const template = `\n    <div class=\"lw-shell\">\n    <style>\n        :root {\n          background-color: #eeeeee;\n        }\n        .lw-shell {\n            margin: 50px;\n            color: #222222;\n            font-family: sans-serif;\n            box-sizing: border-box;\n        }\n        .lw-content-root {\n            display: none;\n        }\n        #lw-loading {\n            margin-bottom: 50px;\n        }\n        .lw-shell__spinner {\n            margin: auto;\n            width: 150px;height: 150px;\n            animation: sweep 1s infinite linear;\n            border-radius:75px;\n            border-bottom:5px solid blue;\n        }\n        @keyframes sweep { to { transform: rotate(360deg); } }\n    </style>\n    <div class=\"lw-shell__spinner\"></div>\n\n    <h2 id=\"lw-loading\"></h2>\n</div>\n    `;\n  let intervalId = null;\n  let count = 0;\n  let clearPromise = null;\n\n  /**\n   * Shell to help with asynchronously loading pages.\n   * Shows `Loading ...` animation after half a second.\n   * Throttles page load by minimum of 250ms.\n   * TODO: transition animation, service worker setup\n   */\n  // eslint-disable-next-line\n  const littleShell = globalThis.littleShell = {\n    /**\n     * Clear the shell\n     *\n     * @return promise that resolves when the shell clears\n     */\n    clear: () => {\n      if (intervalId) {\n        const now = Date.now();\n        clearInterval(intervalId);\n        intervalId = null;\n\n        clearPromise = new Promise(\n          (resolve) => {\n            setTimeout(\n              () => {\n                const shell = document.body.querySelector('div.lw-shell');\n                if (shell) {\n                  document.body.removeChild(shell);\n                }\n                resolve('ok');\n              }, Math.max(250 - (now - startTime), 20),\n            );\n          },\n        );\n      }\n      return clearPromise;\n    },\n  };\n\n  const shellParent = document.createElement('DIV');\n  shellParent.innerHTML = template;\n  document.body.appendChild(shellParent.children[0]);\n\n  intervalId = setInterval(() => {\n    const str = 'Loading ....................';\n    count = (count + 1) % 15;\n    const heading = document.body.querySelector('#lw-loading');\n    if (heading) {\n      heading.textContent = str.substring(0, 10 + count);\n    } else {\n      littleShell.clear();\n    }\n  }, 500);\n})();\n"]}