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

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<string | undefined>(undefined);
   const [error, setError] = useState<any>(undefined);
+  const [loading, setLoading] = useState<boolean>(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() {
           </>
         )}
       </section>
+      {loading ? (
+        <div className="loading-overlay">
+          <LoadingView />
+        </div>
+      ) : null}
     </form>
   );
 }