diff --git a/src/styles/components.css b/src/styles/components.css index 73ca269..7fdb55e 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -333,6 +333,7 @@ i { /* Expression set page */ .page-loading { + position: relative; height: 100%; width: 100%; display: flex; @@ -341,13 +342,25 @@ i { } .page-with-padding { + position: relative; padding: var(--gap-small) var(--gap-medium) var(--gap-medium); } .page-with-bottom-navigation { + position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: calc(100% - 88px) 80px; grid-gap: var(--gap-small); height: 100%; } + +.loading-overlay { + position: absolute; + animation: fadein linear var(--duration-short); + background-color: lavender; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/src/views/AddExpressionView/AddExpressionView.tsx b/src/views/AddExpressionView/AddExpressionView.tsx index 780196b..76f8545 100644 --- a/src/views/AddExpressionView/AddExpressionView.tsx +++ b/src/views/AddExpressionView/AddExpressionView.tsx @@ -8,6 +8,7 @@ import { setWiktionaryWordLanguage, } from "../../lib/wiktionary"; import { addExpressionWithRelationships, Expression } from "../../model"; +import { LoadingView } from "../LoadingView"; export function AddExpressionView() { const [prompt, setPrompt] = useState(""); @@ -16,6 +17,7 @@ export function AddExpressionView() { const [submitStatus, setSubmitStatus] = useState(undefined); const [error, setError] = useState(undefined); + const [loading, setLoading] = useState(false); // TODO waiting fetch completion elements @@ -82,6 +84,7 @@ export function AddExpressionView() { disabled={prompt === ""} onClick={async (event) => { event.preventDefault(); + setLoading(true); try { // `https://en.wiktionary.org/w/api.php?action=parse&format=json&prop=text&page=${query}`; const url = URL.format({ @@ -113,6 +116,7 @@ export function AddExpressionView() { setError(error); } finally { setSubmitStatus(undefined); + setLoading(false); } }} > @@ -162,6 +166,11 @@ export function AddExpressionView() { )} + {loading ? ( +
+ +
+ ) : null} ); }