From 644950510604a5e043799d5dca666b7aedabdae8 Mon Sep 17 00:00:00 2001
From: Akhmad Najmuddin <udintobe@gmail.com>
Date: Mon, 12 Dec 2022 23:49:37 +0700
Subject: [PATCH] Improve loading page

---
 Types.d.ts                                    |   5 ++
 package.json                                  |   2 +-
 packages/renderer/src/assets/128x128.png      | Bin 0 -> 9334 bytes
 .../renderer/src/components/Layout/Layout.tsx |   3 +-
 .../src/components/Loading/Loading.module.css |  50 ++++++++++++++++++
 .../src/components/Loading/Loading.tsx        |  14 +++++
 .../renderer/src/components/Loading/index.ts  |   1 +
 packages/renderer/src/index.css               |  34 ++++++------
 8 files changed, 90 insertions(+), 19 deletions(-)
 create mode 100644 packages/renderer/src/assets/128x128.png
 create mode 100644 packages/renderer/src/components/Loading/Loading.module.css
 create mode 100644 packages/renderer/src/components/Loading/Loading.tsx
 create mode 100644 packages/renderer/src/components/Loading/index.ts

diff --git a/Types.d.ts b/Types.d.ts
index 42ccefe..ceb8ddf 100644
--- a/Types.d.ts
+++ b/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>
 }
diff --git a/package.json b/package.json
index bf8d0a1..30b3796 100644
--- a/package.json
+++ b/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 .",
diff --git a/packages/renderer/src/assets/128x128.png b/packages/renderer/src/assets/128x128.png
new file mode 100644
index 0000000000000000000000000000000000000000..84ab567167a32e3fc4805a3fd7600255bd2e05c6
GIT binary patch
literal 9334
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
DO|DxC

literal 0
HcmV?d00001

diff --git a/packages/renderer/src/components/Layout/Layout.tsx b/packages/renderer/src/components/Layout/Layout.tsx
index bbe5f83..8c7dac6 100644
--- a/packages/renderer/src/components/Layout/Layout.tsx
+++ b/packages/renderer/src/components/Layout/Layout.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import Loading from '../Loading'
 import Navigation from '../Navigation'
 import styles from './Layout.module.css'
 
@@ -7,7 +8,7 @@ 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>
diff --git a/packages/renderer/src/components/Loading/Loading.module.css b/packages/renderer/src/components/Loading/Loading.module.css
new file mode 100644
index 0000000..07cce67
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/packages/renderer/src/components/Loading/Loading.tsx b/packages/renderer/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..72669dd
--- /dev/null
+++ b/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
diff --git a/packages/renderer/src/components/Loading/index.ts b/packages/renderer/src/components/Loading/index.ts
new file mode 100644
index 0000000..c81dfe7
--- /dev/null
+++ b/packages/renderer/src/components/Loading/index.ts
@@ -0,0 +1 @@
+export { default } from './Loading'
diff --git a/packages/renderer/src/index.css b/packages/renderer/src/index.css
index 6fd8076..226c7b7 100644
--- a/packages/renderer/src/index.css
+++ b/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 {