Improve loading page

Types.d.ts

@@ -1,5 +1,10 @@
 declare module '*.module.css'
 
+declare module '*.png' {
+	const value: any
+	export = value
+}
+
 interface ObjectConstructor {
 	typedKeys<T>(obj: T): Array<keyof T>
 }

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "my-personal-list",
 	"description": "My personal anime tracking list",
-	"version": "2.1.2",
+	"version": "2.2.0",
 	"scripts": {
 		"start": "concurrently \"yarn start:renderer\" \"yarn start:main\" --kill-others",
 		"start:main": "tsc && electron .",

packages/renderer/src/components/Layout/Layout.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 
+import Loading from '../Loading'
 import Navigation from '../Navigation'
 import styles from './Layout.module.css'
 
 type Props = { children?: React.ReactNode }
 
 const Layout: React.FC<Props> = ({ children }) => (
 	<div className={styles.layout}>
-		<React.Suspense fallback={<div>Loading...</div>}>
+		<React.Suspense fallback={<Loading />}>
 			<Navigation />
 			<main className={styles.main}>{children}</main>
 		</React.Suspense>

packages/renderer/src/components/Loading/Loading.module.css

@@ -0,0 +1,50 @@
+.loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--background);
+}
+
+.loading .center {
+	position: relative;
+}
+
+.loading .center img {
+	display: block;
+	position: relative;
+	z-index: 1;
+}
+
+.loading .center .ripple {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 50px;
+	height: 50px;
+	background-color: var(--background-light);
+	border-radius: 200px;
+	animation-name: ripple;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-in-out;
+}
+
+@keyframes ripple {
+	0% {
+		width: 50px;
+		height: 50px;
+		opacity: 3;
+	}
+
+	100% {
+		width: 175px;
+		height: 175px;
+		opacity: 0;
+	}
+}

packages/renderer/src/components/Loading/Loading.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import icon from '@/assets/128x128.png'
+import styles from './Loading.module.css'
+
+const Loading: React.FC = () => (
+	<div className={styles.loading}>
+		<div className={styles.center}>
+			<img src={icon} alt='Loading' />
+			<div className={styles.ripple} />
+		</div>
+	</div>
+)
+
+export default Loading

packages/renderer/src/components/Loading/index.ts

@@ -0,0 +1 @@
+export { default } from './Loading'

packages/renderer/src/index.css

@@ -9,15 +9,15 @@
 /* foreground is for: contrast buttons */
 
 :root {
-	--background: #fff;
-	--background-secondary: #ddd;
-	--background-light: rgba(0, 0, 0, 0.075);
-	--border: rgba(0, 0, 0, 0.15);
+	--background: #25292d;
+	--background-secondary: #191c1f;
+	--background-light: rgba(255, 255, 255, 0.1);
+	--border: rgba(255, 255, 255, 0.15);
 
-	--foreground: #1b262c;
-	--text-primary: #1b262c;
-	--text-secondary: rgba(0, 0, 0, 0.65);
-	--text-contrast: #fff;
+	--foreground: #fff;
+	--text-primary: #fff;
+	--text-secondary: rgba(255, 255, 255, 0.65);
+	--text-contrast: #1b262c;
 
 	--color-primary: #2f80ed;
 	--color-green: rgba(33, 150, 83);
@@ -30,16 +30,16 @@
 	--border-radius: 2px;
 }
 
-[data-theme='dark'] {
-	--background: #25292d;
-	--background-secondary: #191c1f;
-	--background-light: rgba(255, 255, 255, 0.1);
-	--border: rgba(255, 255, 255, 0.15);
+[data-theme='light'] {
+	--background: #fff;
+	--background-secondary: #ddd;
+	--background-light: rgba(0, 0, 0, 0.075);
+	--border: rgba(0, 0, 0, 0.15);
 
-	--foreground: #fff;
-	--text-primary: #fff;
-	--text-secondary: rgba(255, 255, 255, 0.65);
-	--text-contrast: #1b262c;
+	--foreground: #1b262c;
+	--text-primary: #1b262c;
+	--text-secondary: rgba(0, 0, 0, 0.65);
+	--text-contrast: #fff;
 }
 
 body {