Add new loading animation

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/application-loader/loading-screen/loading-animation.tsx

@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useMemo } from 'react'
+import styles from './animations.module.scss'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { IconRow } from './icon-row'
+import { createNumberRangeArray } from '../../common/number-range/number-range'
+
+export interface HedgeDocLogoProps {
+  error: boolean
+}
+
+/**
+ * Shows a loading animation.
+ *
+ * @param error Defines if the error animation should be shown instead
+ */
+export const LoadingAnimation: React.FC<HedgeDocLogoProps> = ({ error }) => {
+  const iconRows = useMemo(() => createNumberRangeArray(12).map((index) => <IconRow key={index} />), [])
+
+  return (
+    <div className={`position-relative ${error ? styles.error : ''}`}>
+      <div className={styles.logo}>
+        <div>
+          <ForkAwesomeIcon icon={'pencil'} className={styles.background} size={'5x'}></ForkAwesomeIcon>
+        </div>
+        <div className={`${styles.overlay}`}>
+          <ForkAwesomeIcon icon={'pencil'} size={'5x'}></ForkAwesomeIcon>
+        </div>
+      </div>
+      <div className={styles.pulse}></div>
+      <div className={styles.rows}>{iconRows}</div>
+    </div>
+  )
+}