Firebase - Section 9

StephenGrider · Jun 5, 2015 · c9cf6c9 · c9cf6c9
1 parent 6336102
commit c9cf6c9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/todos/index.html b/todos/index.html
@@ -1,5 +1,14 @@
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+  <style>
+    .content {
+      opacity: 0;
+      transition: opacity 1s ease-in;
+    }
+    .loaded {
+      opacity: 1;
+    }
+  </style>
 </head>
 <body>
   <div class="container">

diff --git a/todos/src/app.jsx b/todos/src/app.jsx
@@ -9,11 +9,14 @@ var App = React.createClass({
   mixins: [ ReactFire ],
   getInitialState: function() {
     return {
-      items: {}
+      items: {},
+      loaded: false
     }
   },
   componentWillMount: function() {
-    this.bindAsObject(new Firebase(rootUrl + 'items/'), 'items');
+    fb = new Firebase(rootUrl + 'items/');
+    this.bindAsObject(fb, 'items');
+    fb.on('value', this.handleDataLoaded);
   },
   render: function() {
     return <div className="row panel panel-default">
@@ -22,9 +25,14 @@ var App = React.createClass({
           To-Do List
         </h2>
         <Header itemsStore={this.firebaseRefs.items} />
-        <List items={this.state.items} />
+        <div className={"content " + (this.state.loaded ? 'loaded' : '')}>
+          <List items={this.state.items} />
+        </div>
       </div>
     </div>
+  },
+  handleDataLoaded: function(){
+    this.setState({loaded: true});
   }
 });