From 08959f83bc9f6d5df93cb6c2d34b671bf419d05a Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 14 Mar 2022 15:20:32 -0300
Subject: take translator from transaltion context

---
 .../src/components/Loading.tsx                     | 31 +++++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/components/Loading.tsx')

diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
index 7504034a0..d28953a10 100644
--- a/packages/taler-wallet-webextension/src/components/Loading.tsx
+++ b/packages/taler-wallet-webextension/src/components/Loading.tsx
@@ -13,13 +13,30 @@
  You should have received a copy of the GNU General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { i18n } from "@gnu-taler/taler-util";
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { useTranslationContext } from "../context/translation";
+import { CenteredText } from "./styled";
 
 export function Loading(): VNode {
-  return (
-    <div>
-      <i18n.Translate>Loading</i18n.Translate>...
-    </div>
-  );
+  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 />;
 }
-- 
cgit v1.2.3