From 8aed1589290432ac61ba0e2d59c74cf481075249 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 18 Apr 2022 21:36:46 +0800
Subject: [PATCH] feat(console): draft logto loading state animation page

---
 .../src/components/AppContent/index.tsx       |  3 ++-
 .../components/LogtoLoading/index.module.scss | 14 +++++++++++
 .../src/components/LogtoLoading/index.tsx     | 24 +++++++++++++++++++
 packages/console/src/pages/Callback/index.tsx |  4 +++-
 packages/phrases/src/locales/en.ts            |  2 ++
 packages/phrases/src/locales/zh-cn.ts         |  2 ++
 6 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 packages/console/src/components/LogtoLoading/index.module.scss
 create mode 100644 packages/console/src/components/LogtoLoading/index.tsx

diff --git a/packages/console/src/components/AppContent/index.tsx b/packages/console/src/components/AppContent/index.tsx
index b1edff1ce..8d2a1d086 100644
--- a/packages/console/src/components/AppContent/index.tsx
+++ b/packages/console/src/components/AppContent/index.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { Outlet, useHref } from 'react-router-dom';
 
 import ErrorBoundary from '../ErrorBoundary';
+import LogtoLoading from '../LogtoLoading';
 import Sidebar from './components/Sidebar';
 import Topbar from './components/Topbar';
 import * as styles from './index.module.scss';
@@ -33,7 +34,7 @@ const AppContent = ({ theme }: Props) => {
   }, [href, isAuthenticated, signIn]);
 
   if (!isAuthenticated) {
-    return <>loading</>;
+    return <LogtoLoading message="general.loading" />;
   }
 
   return (
diff --git a/packages/console/src/components/LogtoLoading/index.module.scss b/packages/console/src/components/LogtoLoading/index.module.scss
new file mode 100644
index 000000000..d56216d12
--- /dev/null
+++ b/packages/console/src/components/LogtoLoading/index.module.scss
@@ -0,0 +1,14 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  color: var(--color-text);
+  align-items: center;
+  overflow: hidden;
+
+  img {
+    height: 300px;
+    margin: _.unit(25) 0 _.unit(6);
+  }
+}
diff --git a/packages/console/src/components/LogtoLoading/index.tsx b/packages/console/src/components/LogtoLoading/index.tsx
new file mode 100644
index 000000000..3775fa478
--- /dev/null
+++ b/packages/console/src/components/LogtoLoading/index.tsx
@@ -0,0 +1,24 @@
+import { I18nKey } from '@logto/phrases';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import highFive from '@/assets/images/high-five.svg';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  message: I18nKey;
+};
+
+const LogtoLoading = ({ message }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <img src={highFive} alt="yeah" />
+      <p>{t(message)}</p>
+    </div>
+  );
+};
+
+export default LogtoLoading;
diff --git a/packages/console/src/pages/Callback/index.tsx b/packages/console/src/pages/Callback/index.tsx
index a92331a6c..9e255c003 100644
--- a/packages/console/src/pages/Callback/index.tsx
+++ b/packages/console/src/pages/Callback/index.tsx
@@ -2,6 +2,8 @@ import { useHandleSignInCallback, useLogto } from '@logto/react';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import LogtoLoading from '@/components/LogtoLoading';
+
 const Callback = () => {
   const { isAuthenticated, isLoading } = useLogto();
   const navigate = useNavigate();
@@ -15,7 +17,7 @@ const Callback = () => {
     }
   }, [isAuthenticated, isLoading, navigate]);
 
-  return <p>Redirecting...</p>;
+  return <LogtoLoading message="general.redirecting" />;
 };
 
 export default Callback;
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts
index 3e99f01dd..19bcbc584 100644
--- a/packages/phrases/src/locales/en.ts
+++ b/packages/phrases/src/locales/en.ts
@@ -8,6 +8,8 @@ const translation = {
     done: 'Done',
     search: 'Search',
     save_changes: 'Save changes',
+    loading: 'Loading...',
+    redirecting: 'Redirecting...',
   },
   main_flow: {
     input: {
diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts
index e55d3c6c1..62242b732 100644
--- a/packages/phrases/src/locales/zh-cn.ts
+++ b/packages/phrases/src/locales/zh-cn.ts
@@ -10,6 +10,8 @@ const translation = {
     done: '完成',
     search: '搜索',
     save_changes: '保存更改',
+    loading: '读取中...',
+    redirecting: '页面跳转中...',
   },
   main_flow: {
     input: {