1 files changed, 78 insertions, 20 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
index f2195b646..b0209f855 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 { useTranslationContext } from "@gnu-taler/web-util/browser";
+import ProgressIcon from "../svg/progress.inline.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;
+    }
+  }
+`;