Fixed to show spinner on data load (#1491)

ReadOnly properties have a special setter. `dataLoading` value is now
set using the setter.

Also fixed the issue where, when showing the spinner, the iron-collapse
does not always open. Note that this collapse bug did exist in version
1.10 too.

tensorboard/components/tf_categorization_utils/tf-category-pane.html

@@ -50,7 +50,11 @@
         </span>
         <span class="count"><span>[[_count]]</span></span>
       </button>
-      <iron-collapse opened="[[opened]]">
+      <!-- TODO(stephanwlee): investigate further. For some reason,
+        transitionend that the iron-collapse relies on sometimes does not
+        trigger when rendering a chart with a spinner. A toy example cannot
+        reproduce this bug. -->
+      <iron-collapse opened="[[opened]]" no-animation>
         <div class="content">
           <template is="dom-if" if="[[opened]]" restamp="[[restamp]]"
                     id="ifOpened">

tensorboard/components/tf_line_chart_data_loader/data-loader-behavior.ts

@@ -124,7 +124,8 @@ export const DataLoaderBehavior = {
 
     if (!this.isAttached) return;
     this._loadDataAsync = this.async(() => {
-      this.dataLoading = true;
+      // Read-only property have a special setter.
+      this._setDataLoading(true);
 
       // Before updating, cancel any network-pending updates, to
       // prevent race conditions where older data stomps newer data.
@@ -144,7 +145,8 @@ export const DataLoaderBehavior = {
       });
 
       return Promise.all(promises).then(this._canceller.cancellable(result => {
-        this.dataLoading = false;
+        // Read-only property have a special setter.
+        this._setDataLoading(false);
         if (result.cancelled) return;
         this.onLoadFinish();
       }));