Merge pull request #43 from kanko-dori/feature/loading-icon

💄 Add load icon

Author: ssssota

hosting/src/components/FavItemDetail.tsx

@@ -16,7 +16,7 @@ interface Props {
  * @return {boolean} Return bool that color is darken
  */
 const isDarken = (color: string): boolean => {
-  if (!color.match(/^#[0-9a-f]{6}$/i)) throw new TypeError('Color must stats with #');
+  if (!color.match(/^#[0-9a-f]{6}$/i)) return false;
   const hsv = convert.hex.hsv(color.substring(1));
   const hue = Math.round(((hsv[0] + 135) % 360) / 360);
   const saturation = hsv[1] / 100;

hosting/src/components/LoadIcon.module.css

@@ -0,0 +1,31 @@
+.load {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 30px;
+  height: 30px;
+}
+
+.load::before, .load::after {
+  position: absolute;
+  content: '';
+  display: block;
+  border-radius: 50%;
+  border-top: 3px solid rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+}
+
+.load::before {
+  animation: rotation-right 0.75s ease 0.1s infinite reverse none;
+}
+
+@keyframes rotation-right {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

hosting/src/components/LoadIcon.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import classes from './LoadIcon.module.css';
+
+const LoadIcon: React.FC = () => <div className={classes.load} />;
+
+export default LoadIcon;

hosting/src/pages/Favox.tsx

@@ -7,6 +7,7 @@ import classes from './Favox.module.css';
 // import PostItem from '../components/PostItem';
 import ImportSpotify from '../components/ImportSpotify';
 import UserHead from '../components/UserHead';
+import LoadIcon from '../components/LoadIcon';
 
 interface Props {
   match: {
@@ -35,6 +36,10 @@ const Favox: React.FC<Props> = (props: Props) => {
     <>
       <UserHead username={props.match.params.username} />
       <Header username={props.match.params.username} />
+      {
+        (data.length === 0)
+        && <LoadIcon />
+      }
       <div className={classes.container}>
         {
           (data !== []) && data.map((item) => <FavItem key={item.title} item={item} />)