Merge pull request #571 from logto-io/charles-log-1879-logto-loading-state-animation

feat(console): draft logto loading state animation page

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 (

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);
+  }
+}

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;

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;

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: {

packages/phrases/src/locales/zh-cn.ts

@@ -10,6 +10,8 @@ const translation = {
     done: '完成',
     search: '搜索',
     save_changes: '保存更改',
+    loading: '读取中...',
+    redirecting: '页面跳转中...',
   },
   main_flow: {
     input: {