diff options
author | Sebastian <sebasjm@gmail.com> | 2023-01-09 08:38:48 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-01-09 08:38:48 -0300 |
commit | 9b04d8bf3581d162cbd631892ca115df811c46f8 (patch) | |
tree | 42b7da7cc3a3f8186823a7571aa221dc8e9aa7a5 /packages/taler-wallet-webextension/src/components/Loading.tsx | |
parent | 14f3d1e06dda003d457f2b3531e197011a284244 (diff) | |
download | wallet-core-9b04d8bf3581d162cbd631892ca115df811c46f8.tar.xz |
fix #7152
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Loading.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Loading.tsx | 96 |
1 files changed, 77 insertions, 19 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx index f2195b646..3a6daaaa6 100644 --- a/packages/taler-wallet-webextension/src/components/Loading.tsx +++ b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -13,30 +13,88 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { css } from "@linaria/core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { useTranslationContext } from "../context/translation.js"; +import ProgressIcon from "../svg/progress.svg"; import { CenteredText } from "./styled/index.js"; +const fadeIn = css` + & { + animation: fadein 3s; + } + @keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } +`; + export function Loading(): VNode { const { i18n } = useTranslationContext(); - const [tooLong, setTooLong] = useState(false); - useEffect(() => { - const id = setTimeout(() => { - setTooLong(true); - }, 500); - return () => { - clearTimeout(id); - }; - }); - if (tooLong) { - return ( - <section style={{ margin: "auto" }}> - <CenteredText> - <i18n.Translate>Loading</i18n.Translate>... - </CenteredText> - </section> - ); - } - return <Fragment />; + return ( + <section style={{ margin: "auto" }}> + <CenteredText class={fadeIn}> + <i18n.Translate>Loading</i18n.Translate>... + </CenteredText> + {/* <div class={ripple} style={{ "--size": "250px" }}> + <div></div> + <div></div> + </div> */} + <div class={fadeIn} dangerouslySetInnerHTML={{ __html: ProgressIcon }} /> + </section> + ); } + +const ripple = css` + & { + display: inline-block; + position: relative; + width: var(--size); + height: var(--size); + } + & div { + position: absolute; + border: 4px solid black; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; + } + & div:nth-child(2) { + animation-delay: -0.3s; + } + @keyframes lds-ripple { + 0% { + top: calc(var(--size) / 2); + left: calc(var(--size) / 2); + width: 0; + height: 0; + opacity: 0; + } + 14.9% { + top: calc(var(--size) / 2); + left: calc(var(--size) / 2); + width: 0; + height: 0; + opacity: 0; + } + 15% { + top: calc(var(--size) / 2); + left: calc(var(--size) / 2); + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0px; + left: 0px; + width: var(--size); + height: var(--size); + opacity: 0; + } + } +`; |