Add loading indicator.

lib/loading-indicator.css

@@ -0,0 +1,13 @@
+.loading-indicator {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-indicator svg {
+  width: 25%;
+  height: 25%;
+  fill: lightgray;
+}

lib/loading-indicator.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import "./loading-indicator.css";
+
+/**
+ * Loading indicator taken from:
+ *
+ * https://commons.wikimedia.org/wiki/File:Chromiumthrobber.svg
+ */
+export const LoadingIndicator: React.FC = () => (
+  <div className="loading-indicator">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 300 300"
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+    >
+      <path
+        d="M 150,0
+           a 150,150 0 0,1 106.066,256.066
+           l -35.355,-35.355
+           a -100,-100 0 0,0 -70.711,-170.711 z"
+      >
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 150 150"
+          to="360 150 150"
+          begin="0s"
+          dur="1s"
+          fill="freeze"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+  </div>
+);

lib/pages/gallery-page.tsx

@@ -10,6 +10,7 @@ import {
   GalleryCompositionKind,
   GalleryContext,
 } from "../gallery-context";
+import { LoadingIndicator } from "../loading-indicator";
 import { Page } from "../page";
 import { createPageWithStateSearchParams } from "../page-with-shareable-state";
 import { svgScale, SvgTransform } from "../svg-transform";
@@ -155,9 +156,13 @@ export const GalleryPage: React.FC<{}> = () => {
         {ctx.error && <p className="error">{ctx.error}</p>}
       </div>
       <div className="canvas scrollable">
-        {ctx.compositions.map((comp) => (
-          <GalleryCompositionView key={comp.id} {...comp} />
-        ))}
+        {ctx.isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          ctx.compositions.map((comp) => (
+            <GalleryCompositionView key={comp.id} {...comp} />
+          ))
+        )}
       </div>
     </Page>
   );