Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-07 23:01:25 -05:00
Code Issues Activity

style(ui): loading icon ()

Browse source 
loading icon
This commit is contained in:
simeng-li 2022-06-10 16:19:21 +08:00 • committed by GitHub
parent 3fd8d22ee3
commit 6c39e1b795
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 51 additions and 55 deletions

14
packages/ui/src/assets/icons/loading-icon-light.svg
View file

@ -1,14 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="#191C1D"/>
<rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="#191C1D"/>
<rect opacity="0.72" y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="#191C1D"/>
<rect opacity="0.24" x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="#191C1D"/>
<rect opacity="0.32" x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="#191C1D"/>
<rect opacity="0.8" x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="#191C1D"/>
<rect opacity="0.64" x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="#191C1D"/>
<rect opacity="0.16" x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="#191C1D"/>
<rect opacity="0.4" x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="#191C1D"/>
<rect opacity="0.88" x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="#191C1D"/>
<rect opacity="0.56" x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="#191C1D"/>
<rect opacity="0.08" x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="#191C1D"/>
</svg>
Side by side

Before

(image error) Size: 1.5 KiB

24
packages/ui/src/assets/icons/loading-icon.svg
View file

@ -1,15 +1,15 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="#F7F8F8"/>
<rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="#F7F8F8"/>
<rect opacity="0.72" y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="#F7F8F8"/>
<rect opacity="0.24" x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="#F7F8F8"/>
<rect opacity="0.32" x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="#F7F8F8"/>
<rect opacity="0.8" x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="#F7F8F8"/>
<rect opacity="0.64" x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="#F7F8F8"/>
<rect opacity="0.16" x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="#F7F8F8"/>
<rect opacity="0.4" x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="#F7F8F8"/>
<rect opacity="0.88" x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="#F7F8F8"/>
<rect opacity="0.56" x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="#F7F8F8"/>
<rect opacity="0.08" x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="#F7F8F8"/>
<rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="currentColor"/>
<rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="currentColor"/>
<rect opacity="0.72" y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="currentColor"/>
<rect opacity="0.24" x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="currentColor"/>
<rect opacity="0.32" x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="currentColor"/>
<rect opacity="0.8" x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="currentColor"/>
<rect opacity="0.64" x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="currentColor"/>
<rect opacity="0.16" x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="currentColor"/>
<rect opacity="0.4" x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="currentColor"/>
<rect opacity="0.88" x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="currentColor"/>
<rect opacity="0.56" x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="currentColor"/>
<rect opacity="0.08" x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="currentColor"/>
</svg>

Side by side Swipe Overlay

Before

(image error) Size: 1.5 KiB

After

(image error) Size: 1.5 KiB

9
packages/ui/src/components/ConfirmModal/IframeConfirmModal.module.scss
View file

@ -24,6 +24,15 @@
.content {
padding: _.unit(5);
flex: 1;
@include _.flex_column;
}
iframe {
display: block;
&.hidden {
display: none;
}
}

12
packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
View file

@ -1,9 +1,10 @@
import classNames from 'classnames';
import React from 'react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import ReactModal from 'react-modal';
import Button from '@/components/Button';
import { LoadingIcon } from '@/components/LoadingLayer';
import * as modalStyles from '../../scss/modal.module.scss';
import * as styles from './IframeConfirmModal.module.scss';
@ -21,6 +22,7 @@ const IframeConfirmModal = ({
onClose,
}: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
const [isLoading, setIsLoading] = useState(true);
return (
<ReactModal
@ -32,13 +34,21 @@ const IframeConfirmModal = ({
>
<div className={styles.container}>
<div className={styles.content}>
{isLoading && <LoadingIcon />}
<iframe
className={isLoading ? styles.hidden : undefined}
role="iframe"
src={url}
title="terms"
frameBorder="0"
width="100%"
height="100%"
onLoad={() => {
setIsLoading(false);
}}
onError={() => {
setIsLoading(false);
}}
/>
</div>
<div className={styles.footer}>

16
packages/ui/src/components/LoadingLayer/LoadingIconLight.tsx
View file

@ -1,16 +0,0 @@
import classNames from 'classnames';
import React from 'react';
import LoadingSvg from '@/assets/icons/loading-icon-light.svg';
import * as styles from './index.module.scss';
type Props = {
className?: string;
};
const LoadingIconLight = ({ className }: Props) => (
<LoadingSvg className={classNames(styles.loadingIcon, className)} />
);
export default LoadingIconLight;

11
packages/ui/src/components/LoadingLayer/index.module.scss
View file

@ -11,16 +11,21 @@
z-index: 300;
}
.loadingIcon {
color: var(--color-loading-icon);
animation: rotating 1s steps(12, end) infinite;
}
.container {
width: 60px;
height: 60px;
border-radius: var(--radius);
background-color: var(--color-toast);
@include _.flex-column;
}
.loadingIcon {
animation: rotating 1s steps(12, end) infinite;
.loadingIcon {
color: var(--color-loading-icon-light);
}
}
@keyframes rotating {

1
packages/ui/src/components/LoadingLayer/index.tsx
View file

@ -4,7 +4,6 @@ import LoadingIcon from './LoadingIcon';
import * as styles from './index.module.scss';
export { default as LoadingIcon } from './LoadingIcon';
export { default as LoadingIconLight } from './LoadingIconLight';
const LoadingLayer = () => (
<div className={styles.overlay}>

7
packages/ui/src/containers/SocialLanding/index.tsx
View file

@ -1,7 +1,7 @@
import classNames from 'classnames';
import React, { useContext } from 'react';
import { LoadingIcon, LoadingIconLight } from '@/components/LoadingLayer';
import { LoadingIcon } from '@/components/LoadingLayer';
import { PageContext } from '@/hooks/use-page-context';
import * as styles from './index.module.scss';
@ -13,16 +13,15 @@ type Props = {
};
const SocialLanding = ({ className, connectorId, isLoading = false }: Props) => {
const { experienceSettings, theme } = useContext(PageContext);
const { experienceSettings } = useContext(PageContext);
const connector = experienceSettings?.socialConnectors.find(({ id }) => id === connectorId);
const Loading = theme === 'light' ? LoadingIconLight : LoadingIcon;
return (
<div className={classNames(styles.container, className)}>
<div className={styles.connector}>
{connector?.logo ? <img src={connector.logo} /> : connectorId}
</div>
{isLoading && <Loading />}
{isLoading && <LoadingIcon />}
</div>
);
};

6
packages/ui/src/pages/Consent/index.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect, useContext } from 'react';
import { consent } from '@/apis/consent';
import { LoadingIcon, LoadingIconLight } from '@/components/LoadingLayer';
import { LoadingIcon } from '@/components/LoadingLayer';
import useApi from '@/hooks/use-api';
import { PageContext } from '@/hooks/use-page-context';
@ -16,8 +16,6 @@ const Consent = () => {
? experienceSettings?.branding.logoUrl
: experienceSettings?.branding.darkLogoUrl;
const Loading = theme === 'light' ? LoadingIconLight : LoadingIcon;
useEffect(() => {
void asyncConsent();
}, [asyncConsent]);
@ -31,7 +29,7 @@ const Consent = () => {
return (
<div className={styles.wrapper}>
<img src={logoUrl} />
{!error && <Loading />}
{!error && <LoadingIcon />}
</div>
);
};

3
packages/ui/src/scss/_desktop.scss
View file

@ -36,6 +36,7 @@ $font-family: -apple-system,
--color-dialogue: #fff;
--color-divider: #e0e3e3;
--color-error: #ba1b1b;
--color-loading-icon: #191c1d;
}
@mixin colors-dark-theme {
@ -66,6 +67,7 @@ $font-family: -apple-system,
--color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-divider: #444748;
--color-error: #dd3730;
--color-loading-icon: #f7f8f8;
}
@ -74,6 +76,7 @@ $font-family: -apple-system,
--color-toast: #34353f;
--color-toast-border: #444748;
--color-overlay: rgba(0, 0, 0, 30%);
--color-loading-icon-light: #f7f8f8;
// shadows
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);

3
packages/ui/src/scss/_mobile.scss
View file

@ -24,6 +24,7 @@ $font-family: -apple-system,
--color-layer: #eff1f1;
--color-error: #ba1b1b;
--color-dialogue: #fff;
--color-loading-icon: #191c1d;
}
@mixin colors-dark-theme {
@ -41,6 +42,7 @@ $font-family: -apple-system,
--color-layer: #2a2c32;
--color-error: #dd3730;
--color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-loading-icon: #f7f8f8;
}
@ -49,6 +51,7 @@ $font-family: -apple-system,
--color-toast: #34353f;
--color-toast-border: #444748;
--color-overlay: rgba(0, 0, 0, 30%);
--color-loading-icon-light: #f7f8f8;
// shadows
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
}