From a8daecacf6f857a71c9f60b173168abfa3b9a6c6 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Tue, 17 Sep 2019 17:16:36 -0400
Subject: [PATCH] pending, loading spinner

---
 src/ui/component/youtubeChannelList/index.js | 10 +++++++++-
 src/ui/component/youtubeChannelList/view.jsx | 14 +++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/ui/component/youtubeChannelList/index.js b/src/ui/component/youtubeChannelList/index.js
index 36e0fd5fb..7280402b6 100644
--- a/src/ui/component/youtubeChannelList/index.js
+++ b/src/ui/component/youtubeChannelList/index.js
@@ -1,10 +1,18 @@
 import { connect } from 'react-redux';
-import { selectYoutubeChannels, doClaimYoutubeChannels, doUserFetch } from 'lbryinc';
+import {
+  selectYoutubeChannels,
+  selectYTImportPending,
+  selectUserIsPending,
+  doClaimYoutubeChannels,
+  doUserFetch,
+} from 'lbryinc';
 
 import YoutubeChannelList from './view';
 
 const select = state => ({
   ytChannels: selectYoutubeChannels(state),
+  ytImportPending: selectYTImportPending(state),
+  userFetchPending: selectUserIsPending(state),
 });
 
 const perform = dispatch => ({
diff --git a/src/ui/component/youtubeChannelList/view.jsx b/src/ui/component/youtubeChannelList/view.jsx
index fdb097729..f3ee29de9 100644
--- a/src/ui/component/youtubeChannelList/view.jsx
+++ b/src/ui/component/youtubeChannelList/view.jsx
@@ -2,22 +2,25 @@
 import * as React from 'react';
 import YoutubeChannelListItem from './internal/youtubeChannel';
 import Button from 'component/button';
+import Spinner from 'component/spinner';
 
 type Props = {
   ytChannels: Array<any>,
+  ytImportPending: boolean,
+  userFetchPending: boolean,
   claimChannels: () => void,
   updateUser: () => void,
 };
 
 export default function YoutubeChannelList(props: Props) {
-  const { ytChannels, claimChannels, updateUser } = props;
+  const { ytChannels, ytImportPending, userFetchPending, claimChannels, updateUser } = props;
   const hasChannels = ytChannels && ytChannels.length;
   const transferEnabled = ytChannels && ytChannels.some(el => el.transferable === true);
   return (
     hasChannels && (
       <section className="card card--section">
         <h2 className="card__title--between">
-          <span>Synced Youtube Channels</span>
+          <span>Synced Youtube Channels{userFetchPending && <Spinner type="small" />}</span>
           <div className="card__actions--inline">
             <Button button="inverse" onClick={updateUser} label={__('Refresh')} />
           </div>
@@ -53,7 +56,12 @@ export default function YoutubeChannelList(props: Props) {
           </tbody>
         </table>
         <div className="card__actions">
-          <Button disabled={IS_WEB} button="primary" onClick={claimChannels} label={__('Claim Channels')} />
+          <Button
+            disabled={IS_WEB || !transferEnabled || ytImportPending}
+            button="primary"
+            onClick={claimChannels}
+            label={__('Claim Channels')}
+          />
           <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
         </div>
       </section>