diff --git a/cosmoz-page-router.js b/cosmoz-page-router.js index 1e879ac..8323f64 100644 --- a/cosmoz-page-router.js +++ b/cosmoz-page-router.js @@ -1,25 +1,26 @@ import { - nothing, html + nothing, + html } from 'lit-html'; -import { until } from 'lit-html/directives/until'; import { - component, useMemo + component, + useMemo } from 'haunted'; -import { - useRoutes -} from './lib/use-routes'; +import { useRoutes } from './lib/use-routes'; import { useRouteEvents } from './lib/use-route-events'; +import { usePromise } from '@neovici/cosmoz-utils/lib/hooks/use-promise'; const Router = function ({ routes }) { const route = useRoutes(routes), result = useMemo(() => route ? route.handle() : undefined, [route]), - renderResult = useMemo(() => Promise.resolve(result).catch(() => nothing), [result]); + renderResult = useMemo(() => Promise.resolve(result).catch(() => nothing), [result]), + [output] = usePromise(renderResult); useRouteEvents(route, result, this); - return html`${until(renderResult, nothing)}`; + return html`${output || nothing}`; }; customElements.define('cosmoz-page-router', component(Router)); diff --git a/package-lock.json b/package-lock.json index 51aff42..088adba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1349,6 +1349,14 @@ "rimraf": "^2.5.2" } }, + "@neovici/cosmoz-utils": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@neovici/cosmoz-utils/-/cosmoz-utils-3.4.0.tgz", + "integrity": "sha512-UBngI+gNX7EMKMFpmO2Nurk6QCR52B1Xs3xRcxBdqZdHNtFABKM46XOZmhKb0UXWkaIj+ZzBI8nG2M1TOgZqUg==", + "requires": { + "haunted": "^4.0.0" + } + }, "@neovici/eslint-config": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@neovici/eslint-config/-/eslint-config-1.2.1.tgz", diff --git a/package.json b/package.json index a45d7db..a5e8ace 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ } }, "dependencies": { + "@neovici/cosmoz-utils": "^3.4.0", "@polymer/iron-location": "^3.0.0", "@polymer/polymer": "^3.3.1", "haunted": "^4.7.0",