From 74f1facf2e46234772ed58160dbe9bed13f39f27 Mon Sep 17 00:00:00 2001
From: Petr Flaks <petr@flaks.dev>
Date: Sun, 16 Aug 2020 12:52:47 +0300
Subject: [PATCH] Show loading animation after clicking on bookmark link

---
 src/components/Bookmark/BookmarkFolder.tsx    |  2 +-
 src/components/Bookmark/BookmarkLink.tsx      | 13 +++++++++--
 .../ToolbarItem/BookmarkManager.tsx           |  2 +-
 src/components/Chip/Chip.css                  | 23 +++++++++++++++++++
 src/components/Chip/Chip.css.d.ts             |  2 ++
 src/components/Chip/Chip.tsx                  | 13 +++++++----
 src/components/variables.css                  |  3 +++
 7 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/Bookmark/BookmarkFolder.tsx b/src/components/Bookmark/BookmarkFolder.tsx
index ea809ff5..98975b19 100644
--- a/src/components/Bookmark/BookmarkFolder.tsx
+++ b/src/components/Bookmark/BookmarkFolder.tsx
@@ -36,7 +36,7 @@ export const BookmarkFolder = (props: BookmarkFolderProps) => {
   return (
     <li className={s.bookmarkItem}>
       <button className={s.bookmark} onClick={handleFolderClick} type="button">
-        <Chip icon={icon} label={props.bookmark.title} shape={ChipShape.Rounded} />
+        <Chip icon={icon} label={props.bookmark.title} loading={false} shape={ChipShape.Rounded} />
       </button>
     </li>
   );
diff --git a/src/components/Bookmark/BookmarkLink.tsx b/src/components/Bookmark/BookmarkLink.tsx
index a7061f77..1a2907d2 100644
--- a/src/components/Bookmark/BookmarkLink.tsx
+++ b/src/components/Bookmark/BookmarkLink.tsx
@@ -12,15 +12,24 @@ interface BookmarkProps {
 
 export const BookmarkLink = (props: BookmarkProps) => {
   const [icon, setIcon] = useState(props.bookmark.favicon);
+  const [isLoading, setLoading] = useState(false);
 
   const handleFaviconLoadingError = () => {
     setIcon(iconPublic);
   };
 
+  const handleClick = () => {
+    setLoading(true);
+
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  };
+
   return (
     <li className={s.bookmarkItem}>
-      <a className={s.bookmark} href={props.bookmark.url} rel="noopener" target="_self">
-        <Chip handleFaviconLoadingError={handleFaviconLoadingError} icon={icon} label={props.bookmark.title} shape={ChipShape.Rounded} />
+      <a className={s.bookmark} href={props.bookmark.url} onClick={handleClick} rel="noopener" target="_self">
+        <Chip handleFaviconLoadingError={handleFaviconLoadingError} icon={icon} label={props.bookmark.title} loading={isLoading} shape={ChipShape.Rounded} />
       </a>
     </li>
   );
diff --git a/src/components/BottomToolbar/ToolbarItem/BookmarkManager.tsx b/src/components/BottomToolbar/ToolbarItem/BookmarkManager.tsx
index 7abcd683..6344736e 100644
--- a/src/components/BottomToolbar/ToolbarItem/BookmarkManager.tsx
+++ b/src/components/BottomToolbar/ToolbarItem/BookmarkManager.tsx
@@ -19,7 +19,7 @@ export const BookmarkManager = () => {
   return (
     <li className={bookmarkStyles.bookmarkItem}>
       <a className={bookmarkStyles.bookmark} href={url} onClick={handleClick} rel="noopener" target="_self">
-        <Chip icon={iconStar} label={label} shape={ChipShape.Squared} tooltip={tooltip} />
+        <Chip icon={iconStar} label={label} loading={false} shape={ChipShape.Squared} tooltip={tooltip} />
       </a>
     </li>
   );
diff --git a/src/components/Chip/Chip.css b/src/components/Chip/Chip.css
index 46987994..2356eb54 100644
--- a/src/components/Chip/Chip.css
+++ b/src/components/Chip/Chip.css
@@ -13,6 +13,29 @@
   transition: background-color 0.2s, transform 0.2s;
 }
 
+.chip.loading {
+  animation: backgroundStripAnimation 1s linear infinite reverse;
+  background-image:
+    repeating-linear-gradient(
+      135deg,
+      var(--chip-loading-strip-color-1) 25%,
+      var(--chip-loading-strip-color-1) 50%,
+      var(--chip-loading-strip-color-2) 50%,
+      var(--chip-loading-strip-color-2) 75%
+    );
+  background-size: var(--chip-loading-strip-size) var(--chip-loading-strip-size);
+}
+
+@keyframes backgroundStripAnimation {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: calc(var(--chip-loading-strip-size) * -1) 0;
+  }
+}
+
 .chip.chip--rounded {
   border-radius: var(--chip-rounded-border-radius);
 }
diff --git a/src/components/Chip/Chip.css.d.ts b/src/components/Chip/Chip.css.d.ts
index 5f0b7b27..85f93bda 100644
--- a/src/components/Chip/Chip.css.d.ts
+++ b/src/components/Chip/Chip.css.d.ts
@@ -1,11 +1,13 @@
 declare namespace ChipCssNamespace {
   export interface IChipCss {
+    backgroundStripAnimation: string;
     chip: string;
     chipIcon: string;
     chipIconInline: string;
     chipLabel: string;
     chipRounded: string;
     chipSquared: string;
+    loading: string;
   }
 }
 
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 264c59bb..cd7a25cd 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -25,6 +25,7 @@ interface ChipProps {
   handleFaviconLoadingError?: () => void;
   icon: string | Favicon;
   label: string;
+  loading: boolean;
   shape: ChipShape;
   tooltip?: string;
 }
@@ -50,16 +51,16 @@ export const Chip = (props: ChipProps) => {
 
   const tooltip = props.tooltip || props.label;
 
-  let shapeClass;
+  const chipClasses = [s.chip];
 
   switch (props.shape) {
     case ChipShape.Rounded:
-      shapeClass = s.chipRounded;
+      chipClasses.push(s.chipRounded);
 
       break;
 
     case ChipShape.Squared:
-      shapeClass = s.chipSquared;
+      chipClasses.push(s.chipSquared);
 
       break;
 
@@ -67,8 +68,12 @@ export const Chip = (props: ChipProps) => {
       throw Error('Unsupported chip shape');
   }
 
+  if (props.loading) {
+    chipClasses.push(s.loading);
+  }
+
   return (
-    <div className={classnames(s.chip, shapeClass)} title={tooltip}>
+    <div className={classnames(chipClasses)} title={tooltip}>
       {iconElement}
 
       <span className={s.chipLabel}>{props.label}</span>
diff --git a/src/components/variables.css b/src/components/variables.css
index 4136ea8f..4c2c1b5b 100644
--- a/src/components/variables.css
+++ b/src/components/variables.css
@@ -4,6 +4,9 @@
   --bookmark-category-title-text-color: #eee;
   --bookmark-column-min-width: 235px;
   --bookmark-text-color: #eee;
+  --chip-loading-strip-size: 20px;
+  --chip-loading-strip-color-1: rgba(238, 238, 238, 0.1);
+  --chip-loading-strip-color-2: rgba(238, 238, 238, 0.2);
   --chip-rounded-border-radius: 1rem;
   --chip-squared-border-radius: 0.5rem;
   --font-family-sans-serif: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";