Added Loading Spinner

src/ui/components/Loaders/LoadingSpinner.tsx

@@ -0,0 +1,15 @@
+import { h } from "preact";
+import "./style.spinner.css"
+export default function LoadingSpinner() {
+    return (
+      <div className="loader-container">
+        <div className="loader">
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="loader-dot" />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+

src/ui/components/Loaders/style.spinner.css

@@ -0,0 +1,95 @@
+.loader-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 200px;
+}
+
+.loader {
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+.loader-dot {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.loader-dot:nth-child(1) {
+  background-color: rgba(102, 0, 51, 0.3);
+}
+.loader-dot:nth-child(2) {
+  background-color: rgba(102, 0, 51, 0.4);
+}
+.loader-dot:nth-child(3) {
+  background-color: rgba(102, 0, 51, 0.5);
+}
+.loader-dot:nth-child(4) {
+  background-color: rgba(102, 0, 51, 0.6);
+}
+.loader-dot:nth-child(5) {
+  background-color: rgba(102, 0, 51, 0.7);
+}
+.loader-dot:nth-child(6) {
+  background-color: rgba(102, 0, 51, 0.8);
+}
+.loader-dot:nth-child(7) {
+  background-color: rgba(102, 0, 51, 0.9);
+}
+.loader-dot:nth-child(8) {
+  background-color: rgba(102, 0, 51, 1);
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  animation: rotate 1.2s linear infinite;
+}
+
+.loader-dot {
+  transform-origin: 24px 24px;
+}
+
+.loader-dot:nth-child(1) {
+  transform: rotate(0deg) translate(20px);
+}
+.loader-dot:nth-child(2) {
+  transform: rotate(45deg) translate(20px);
+}
+.loader-dot:nth-child(3) {
+  transform: rotate(90deg) translate(20px);
+}
+.loader-dot:nth-child(4) {
+  transform: rotate(135deg) translate(20px);
+}
+.loader-dot:nth-child(5) {
+  transform: rotate(180deg) translate(20px);
+}
+.loader-dot:nth-child(6) {
+  transform: rotate(225deg) translate(20px);
+}
+.loader-dot:nth-child(7) {
+  transform: rotate(270deg) translate(20px);
+}
+.loader-dot:nth-child(8) {
+  transform: rotate(315deg) translate(20px);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #1a0a13;
+  min-height: 100vh;
+}
+

src/ui/screens/Docs/Doc/index.tsx

@@ -8,6 +8,7 @@ import { RichText } from '~/ui/components/RichText'
 import { DocLinkContext } from '~/ui/router/DocLinkContext'
 import { Content } from './Content'
 import * as styles from './styles.css'
+import LoadingSpinner from '~/ui/components/Loaders/LoadingSpinner'
 
 const SCROLL_OFFSET = 35
 
@@ -66,7 +67,7 @@ export const Doc: FunctionComponent<Props> = ({
       </div>
     )
   } else if (loading) {
-    return <div class={styles.wrapper}>Loading...</div>
+    return <div class={styles.wrapper}><LoadingSpinner/></div>
   } else {
     // FIXME:
     return <div class={styles.wrapper}>Error!</div>

src/ui/screens/Docs/Finder/index.tsx

@@ -12,7 +12,6 @@ import { NoResults } from './NoResults'
 import * as styles from './styles.css'
 import { filterPages } from './utils'
 import { Widget } from './Widget'
-
 interface FinderProps {
   selectedVersion: string
   selectedPage: string
@@ -68,7 +67,7 @@ export const Finder: FunctionComponent<FinderProps> = ({
   } else if (loading) {
     return (
       <div class={styles.container}>
-        <div class={styles.loading}>Loading...</div>
+        <div class={styles.loading}></div>
       </div>
     )
   } else {

src/ui/screens/Docs/index.tsx

@@ -18,6 +18,7 @@ import { Finder } from './Finder'
 import hamburgerPath from './img/hamburger.svg'
 import { NavBar } from './NavBar'
 import * as styles from './styles.css'
+import LoadingSpinner from '~/ui/components/Loaders/LoadingSpinner'
 
 interface Props {
   selectedSubmodule: DateFnsDocs.Submodule
@@ -106,7 +107,7 @@ export const Docs: FunctionComponent<Props> = ({
       </div>
     )
   } else if (loading) {
-    return <div class={styles.loading}>Loading...</div>
+    return <div class={styles.loading}><LoadingSpinner/></div>
   } else {
     return <div class={styles.loading}>Failed to load package list!</div>
   }