chore: import upstream snapshot with attribution

app/react/components/ViewLoading/ViewLoading.module.css

@@ -0,0 +1,13 @@
+.root {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.message {
+  margin-top: 25px;
+}

app/react/components/ViewLoading/ViewLoading.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+
+import { ViewLoading } from './ViewLoading';
+
+export default {
+  component: ViewLoading,
+  title: 'Components/ViewLoading',
+} as Meta;
+
+interface Args {
+  message: string;
+}
+
+function Template({ message }: Args) {
+  return <ViewLoading message={message} />;
+}
+
+export const Example: StoryFn<Args> = Template.bind({});
+Example.args = {
+  message: 'Loading...',
+};

app/react/components/ViewLoading/ViewLoading.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+import styles from './ViewLoading.module.css';
+
+interface Props {
+  message?: string;
+}
+
+export function ViewLoading({ message }: Props) {
+  return (
+    <div className={clsx('row', styles.root)}>
+      <div className="sk-fold">
+        <div className="sk-fold-cube" />
+        <div className="sk-fold-cube" />
+        <div className="sk-fold-cube" />
+        <div className="sk-fold-cube" />
+      </div>
+      {message && <span className={styles.message}>{message}</span>}
+    </div>
+  );
+}

app/react/components/ViewLoading/index.ts

@@ -0,0 +1 @@
+export { ViewLoading } from './ViewLoading';