feat(ui): add loader while saving an article

ui/src/articles/components/ArchiveLink.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useMutation } from 'react-apollo-hooks'
 
 import { getGQLError } from '../../common/helpers'
 import Kbd from '../../common/Kbd'
 import LinkIcon from '../../common/LinkIcon'
+import Loader from '../../common/Loader'
 import { connectMessageDispatch, IMessageDispatchProps } from '../../containers/MessageContainer'
 import { ArchiveService } from '../../settings/archive-services/models'
 import { Article } from '../models'
@@ -24,21 +25,29 @@ interface Props {
 type AllProps = Props & IMessageDispatchProps
 
 export const ArchiveLink = (props: AllProps) => {
+  const [loading, setLoading] = useState(false)
   const { article, service, showMessage, keyboard = false } = props
 
   const archiveArticleMutation = useMutation<ArchiveArticleFields>(ArchiveArticle)
 
   const archiveArticle = useCallback(async () => {
+    setLoading(true)
     try {
       await archiveArticleMutation({
         variables: { id: article.id, archiver: service.alias }
       })
       showMessage(`Article sent to ${service.alias}: ${article.title}`)
     } catch (err) {
       showMessage(getGQLError(err), true)
+    } finally {
+      setLoading(false)
     }
   }, [article])
 
+  if (loading) {
+    return <Loader />
+  }
+
   return (
     <LinkIcon title={`Save to ${service.alias}`} icon="backup" onClick={archiveArticle}>
       <span>Save to {service.alias}</span>

ui/src/articles/components/ArticleList.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, useEffect, useRef, useState } from 'react'
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 
 import ButtonIcon from '../../common/ButtonIcon'
 import Center from '../../common/Center'
@@ -56,6 +56,7 @@ export default (props: Props) => {
   } = props
 
   const ref = useRef<HTMLUListElement>(null)
+  const [loading, setLoading] = useState(false)
   const [articles, setArticles] = useState(props.articles.filter(filter))
   const [activeIndex, setActiveIndex] = useState(0)
 
@@ -64,6 +65,12 @@ export default (props: Props) => {
 
   useKeyNavigation(ref, styles.item, !isMobileDisplay)
 
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    await refetch()
+    setLoading(false)
+  }, [refetch])
+
   useEffect(() => {
     if (ref.current) {
       const $el: any = ref.current.childNodes.item(activeIndex)
@@ -81,7 +88,7 @@ export default (props: Props) => {
     } else if (articles.length === 0) {
       return (
         <Empty>
-          <ButtonIcon title="Refresh" icon="refresh" onClick={() => refetch()} />
+          <ButtonIcon title="Refresh" icon="refresh" onClick={() => refresh()} loading={loading} />
           <br />
           <span>{emptyMessage}</span>
         </Empty>