smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: delay initial loading message & tweak design (#5049)

Browse source
This commit is contained in:
David Luzar 2022-04-19 19:08:13 +02:00 • committed by GitHub
parent 4348c55c31
commit 55ccd5b79b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/LayerUI.tsx
View file

@ -492,7 +492,7 @@ const LayerUI = ({
const dialogs = (
<>
{appState.isLoading && <LoadingMessage />}
{appState.isLoading && <LoadingMessage delay={250} />}
{appState.errorMessage && (
<ErrorDialog
message={appState.errorMessage}

26
src/components/LoadingMessage.tsx
View file

@ -1,10 +1,30 @@
import { t } from "../i18n";
import { useState, useEffect } from "react";
import Spinner from "./Spinner";
export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
const [isWaiting, setIsWaiting] = useState(!!delay);
useEffect(() => {
if (!delay) {
return;
}
const timer = setTimeout(() => {
setIsWaiting(false);
}, delay);
return () => clearTimeout(timer);
}, [delay]);
if (isWaiting) {
return null;
}
export const LoadingMessage = () => {
// !! KEEP THIS IN SYNC WITH index.html !!
return (
<div className="LoadingMessage">
<span>{t("labels.loadingScene")}</span>
<div>
<Spinner />
</div>
<div className="LoadingMessage-text">{t("labels.loadingScene")}</div>
</div>
);
};