adding loading barrier before the poll is complete. now polls on open of modal instead of app.

1 files changed, 5 insertions, 4 deletions

diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
index 7d8f02bb8..f63661c1a 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -29,7 +29,8 @@ export class ReportManager extends React.Component<{}> {
 
     private octokit: Octokit;
 
-    public issues: any[] = [];
+    @observable public issues: any[] = [];
+    @action setIssues = action((issues: any[]) => { this.issues = issues; });
 
     @observable public shownIssues = this.issues.filter(issue => issue.state === 'open');
     
@@ -46,7 +47,7 @@ export class ReportManager extends React.Component<{}> {
         ReportManager.Instance = this;
 
         this.octokit = new Octokit({
-            auth: 'key'
+            auth: 'auth key'
         });
     }
 
@@ -56,7 +57,7 @@ export class ReportManager extends React.Component<{}> {
             // load in the issues if not already loaded
             this.getAllIssues()
                 .then(issues => {
-                    this.issues = issues
+                    this.setIssues(issues);
                     this.updateIssueSearch();
                 })
                 .catch(err => console.log(err));
@@ -124,7 +125,7 @@ export class ReportManager extends React.Component<{}> {
                 <div className="settings-panel">
                     <input type="text" placeholder='issue name' onChange={(e => this.updateIssueSearch(e.target.value))}></input>
                     <h3>Previous Issues</h3>
-                    {this.shownIssues.map(issue => <div>{issue.title}</div>)}
+                    {this.issues.length === 0 ? <div>loading</div> : this.shownIssues.map(issue => <div key={issue.number}>{issue.title}</div>)}
 
                     <div className="settings-user">
                         <button onClick={() => this.getAllIssues().then(issues => this.issues = issues)}>Poll Issues</button>