From 1990f0e58a86ba5d29e2dce216a7c552b9afaf15 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Thu, 21 Apr 2016 02:02:16 +0200
Subject: [PATCH] Show when loading playlists

---
 public/script.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/public/script.js b/public/script.js
index 75d84e8..0ec532e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -88,14 +88,14 @@ var DuplicateFinderBox = React.createClass({
             currentId: null,
             currentUId: null,
             dups: null,
-            loading: false
+            dupsLoading: false
         };
     },
     handlePlaylistClick: function (id, uid) {
         this.setState({
             currentId: id,
             currentUId: uid,
-            loading: true
+            dupsLoading: true
         });
         var self = this;
 
@@ -108,7 +108,7 @@ var DuplicateFinderBox = React.createClass({
                 var dups = data.data;
                 self.setState({
                     dups: dups,
-                    loading: false
+                    dupsLoading: false
                 });
             },
             error: function (xhr, response, err) {
@@ -118,21 +118,25 @@ var DuplicateFinderBox = React.createClass({
     },
     render: function () {
         var duplicates = <p>Loading...</p>;
-        if (!this.state.loading) {
+        if (!this.state.dupsLoading) {
             duplicates = <DuplicatesBox dups={this.state.dups}/>;
         }
+        var playlistBox = <p>Loading...</p>;
+        if (!this.props.playlistsLoading) {
+            playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
+        }
         return (
             <div className="duplicateFinderBox">
                 <div className="col-md-3">
                     <h2>Playlists</h2>
-                    <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>
+                    {playlistBox}
                 </div>
                 <div className="col-md-6">
                     <h2>Duplicates</h2>
                     {duplicates}
                 </div>
             </div>
-        )
+        );
     }
 });
 
@@ -215,10 +219,14 @@ var App = React.createClass({
         return {
             access_token: access_token,
             refresh_token: refresh_token,
-            playlists: null
+            playlists: null,
+            playlistsLoading: true
         };
     },
     getPlaylists: function () {
+        this.setState({
+            playlistsLoading: true
+        });
         var self = this;
         $.ajax({
             url: '/get_playlists',
@@ -228,7 +236,8 @@ var App = React.createClass({
             success: function (data) {
                 var pl = data.data;
                 self.setState({
-                    playlists: pl
+                    playlists: pl,
+                    playlistsLoading: false
                 });
             },
             error: function (xhr, response, err) {
@@ -261,8 +270,9 @@ var App = React.createClass({
         };
         var content = <p>Please log in with Spotify :)</p>;
         if (this.isLoggedIn()) {
+            var playlistsLoading = this.state.playlistsLoading;
             content = (
-                <DuplicateFinderBox auth={auth} playlists={this.state.playlists}/>
+                <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
             );
         }