delayed rendering of text

Change-Id: I1eb1223d09e344340101187c9cc4a0032fb7c3ea
pahund · Nov 3, 2016 · 1b7b418 · 1b7b418
1 parent 5c993d3
commit 1b7b418
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -26,6 +26,6 @@
         <meta name="theme-color" content="#ffffff">
     </head>
     <body>
-        <div id="root" data-article-content="Burrowing goby flying characin sixgill ray whale catfish salmon pupfish. Hillstream loach Black tetra bull trout sand lance. Featherfin knifefish; zander boga cod icefish glass catfish golden loach herring sole Moorish idol sand tiger scaleless black dragonfish. Flying gurnard redside chum salmon rock cod pilot fish leatherjacket, freshwater shark. Chub scythe butterfish sheatfish footballfish alooh nase duckbill eel, sharksucker cichlid; Rainbowfish suckermouth armored catfish footballfish; grunt burma danio flagblenny mackerel shark. Ganges shark pricklefish spinyfin salmon lanternfish. Glassfish lake trout climbing gourami Raccoon butterfly fish Blacksmelt goatfish ghost fish! Ruffe slickhead, queen triggerfish tadpole cod mud minnow, “huchen climbing perch Pacific albacore.” Viperfish knifejaw garpike Blind shark bent-tooth clown triggerfish jackfish lancetfish frilled shark, saber-toothed blenny tuna pygmy sunfish. Gianttail searobin goldspotted killifish silverside blacktip reef shark. Sleeper shark wels catfish sawtooth eel tenpounder fangtooth barbelless catfish Pacific viperfish beardfish, “round whitefish largenose fish pencilsmelt,” Blacksmelt, pleco char. Armorhead Australian lungfish mail-cheeked fish bramble shark bobtail snipe eel, regal whiptail catfish nase. Oceanic flyingfish yellowtail amberjack. Dhufish, loweye catfish, plunderfish Pacific albacore. Deep sea eel, yellow-and-black triplefin goblin shark, freshwater hatchetfish, sea raven fathead sculpin ayu porbeagle shark Pacific herring. Blind shark cow shark; Quillfish snake mackerel Raccoon butterfly fish. Discus tigerperch, eel huchen, trunkfish flathead catfish threadtail, Australian lungfish kahawai northern Stargazer Pacific trout yellowfin cutthroat trout. Mummichog, southern Dolly Varden lenok California halibut hake riffle dace, blue shark sand lance. Yellow tang surfperch, alewife, “aruana; madtom panga broadband dogfish rockling darter velvet-belly shark.” Ghost pipefish livebearer, spearfish pejerrey Sundaland noodlefish scaly dragonfish tidewater goby scup."></div>
+        <div id="root" data-customer-quote="Burrowing goby flying characin sixgill ray whale catfish salmon pupfish. Hillstream loach Black tetra bull trout sand lance. Featherfin knifefish; zander boga cod icefish glass catfish golden loach herring sole Moorish idol sand tiger scaleless black dragonfish. Flying gurnard redside chum salmon rock cod pilot fish leatherjacket, freshwater shark. Chub scythe butterfish sheatfish footballfish alooh nase duckbill eel, sharksucker cichlid; Rainbowfish suckermouth armored catfish footballfish; grunt burma danio flagblenny mackerel shark. Ganges shark pricklefish spinyfin salmon lanternfish. Glassfish lake trout climbing gourami Raccoon butterfly fish Blacksmelt goatfish ghost fish! Ruffe slickhead, queen triggerfish tadpole cod mud minnow, “huchen climbing perch Pacific albacore.” Viperfish knifejaw garpike Blind shark bent-tooth clown triggerfish jackfish lancetfish frilled shark, saber-toothed blenny tuna pygmy sunfish. Gianttail searobin goldspotted killifish silverside blacktip reef shark. Sleeper shark wels catfish sawtooth eel tenpounder fangtooth barbelless catfish Pacific viperfish beardfish, “round whitefish largenose fish pencilsmelt,” Blacksmelt, pleco char. Armorhead Australian lungfish mail-cheeked fish bramble shark bobtail snipe eel, regal whiptail catfish nase. Oceanic flyingfish yellowtail amberjack. Dhufish, loweye catfish, plunderfish Pacific albacore. Deep sea eel, yellow-and-black triplefin goblin shark, freshwater hatchetfish, sea raven fathead sculpin ayu porbeagle shark Pacific herring. Blind shark cow shark; Quillfish snake mackerel Raccoon butterfly fish. Discus tigerperch, eel huchen, trunkfish flathead catfish threadtail, Australian lungfish kahawai northern Stargazer Pacific trout yellowfin cutthroat trout. Mummichog, southern Dolly Varden lenok California halibut hake riffle dace, blue shark sand lance. Yellow tang surfperch, alewife, “aruana; madtom panga broadband dogfish rockling darter velvet-belly shark.” Ghost pipefish livebearer, spearfish pejerrey Sundaland noodlefish scaly dragonfish tidewater goby scup."></div>
     </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,3 @@
-.App {
-    text-align: center;
-}
-
 .App-logo {
     animation: App-logo-spin infinite 20s linear;
     height: 80px;
@@ -12,12 +8,17 @@
     height: 150px;
     padding: 20px;
     color: darkolivegreen;
+    text-align: center;
 }
 
 .App-intro {
     font-size: large;
 }
 
+.App-technical-note {
+    font-size: small;
+    text-align: right;
+}
 @keyframes App-logo-spin {
     from {
         transform: rotate(0deg);

diff --git a/src/App.js b/src/App.js
@@ -2,9 +2,25 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+const delay = {
+    choMessage: 10
+};
+
 class App extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            choMessage: null
+        };
+        window.setTimeout(() => this.setState({
+            choMessage: "Trees cover up a multitude of sins. All kinds of happy little splashes. And just raise cain. When things happen - enjoy them. They're little gifts. It's important to me that you're happy. Let's put some happy little bushes on the other side now. We'll paint one happy little tree right here. In life you need colors. Automatically, all of these beautiful, beautiful things will happen. This present moment is perfect simply due to the fact you're experiencing it. Isn't that fantastic? You can just push a little tree out of your brush like that. Just let go - and fall like a little waterfall. We want to use a lot pressure while using no pressure at all. This is your world, whatever makes you happy you can put in it. Go crazy. Let that brush dance around there and play. Pretend you're water. Just floating without any effort. Having a good day. We don't have to be concerned about it. We just have to let it fall where it will. I like to beat the brush. Maybe there's a little something happening right here. See there, told you that would be easy. Let's put some happy little clouds in our world. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone. Look around, look at what we have. Beauty is everywhere, you only have to look to see it. You don't want to kill all your dark areas they are very important. That is when you can experience true joy, when you have no fear. You can get away with a lot. Only eight colors that you need. We'll have a super time. Work that paint. All you have to do is let your imagination go wild."
+        }), delay.choMessage);
+
+    }
     render() {
-        const articleContent = document.getElementById('root').getAttribute('data-article-content');
+        const customerQuote = document.getElementById('root').getAttribute('data-customer-quote');
+        const { choMessage } = this.state;
         return (
             <div className="App">
                 <div className="App-header">
@@ -18,9 +34,21 @@ class App extends Component {
                 <p>
                     Here's what our customers have to say:
                 </p>
-                <quote>
-                    {articleContent}
-                </quote>
+                <blockquote>
+                    {customerQuote}
+                </blockquote>
+                <p className="App-technical-note">
+                    (text comes from a data attribute in the static HTML page's DOM)
+                </p>
+                <p>
+                    A personal message from our CHO (Chief Happiness Officer):
+                </p>
+                <blockquote>
+                    {choMessage}
+                </blockquote>
+                <p className="App-technical-note">
+                    (text set {delay.choMessage} ms after component was initially rendered via component.setState)
+                </p>
             </div>
         );
     }

diff --git a/src/index.css b/src/index.css
@@ -5,3 +5,9 @@ body {
     padding: 0;
     font-family: sans-serif;
 }
+
+sup {
+    font-size: smaller;
+}
+
+