Spinner implementation (start async render algorithm, ref #123)

Author: raphamorim

packages/app/src/App.js

@@ -9,25 +9,13 @@ import {
   withNavigation,
 } from '../../react-ape/reactApeEntry';
 
-// import Spinner from './Spinner';
 import Sidebar from './Sidebar';
 import Grid from './Grid';
 import Clock from './Clock';
 import Slideshow from './Slideshow';
 
 const {width, height} = Dimensions.get('window');
 
-// Register Custom Components
-/* 
-  <custom.Spinner 
-    degrees={degrees}
-    style={{ top: height / 4 + 8, left: width / 2 - 60, color: 'white' }}
-  />
-*/
-// const custom = {
-//   Spinner: registerComponent('Spinner', Spinner),
-// };
-
 const styles = StyleSheet.create({
   surface: {
     backgroundColor: '#202020',

packages/app/src/Grid.js

@@ -7,6 +7,8 @@ import {
   StyleSheet,
 } from '../../react-ape/reactApeEntry';
 
+import Loader from './Loader';
+
 const {height} = Dimensions.get('screen');
 
 const styles = StyleSheet.create({
@@ -42,9 +44,17 @@ const list = [
 class Grid extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      loading: true,
+    };
   }
 
   render() {
+    const {loading} = this.state;
+    if (loading) {
+      return <Loader />;
+    }
+
     return (
       <View style={styles.grid}>
         <Text style={styles.title}>Rio de Janeiro</Text>

packages/app/src/Loader.js

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: width / 2 - 40,
     top: height / 4,
-    backgroundColor: 'blue',
+    backgroundColor: '#202020',
   },
 });
 
@@ -52,9 +52,8 @@ class Loader extends Component {
       <View style={styles.container}>
         <custom.Spinner
           degrees={degrees}
-          style={{top: height / 4 + 8, left: width / 2 - 60, color: 'white'}}
+          style={{top: 550, left: 740, color: 'orange'}}
         />
-        <Text style={{color: 'white'}}>Loading...</Text>
       </View>
     );
   }

packages/app/src/Spinner.js

@@ -3,13 +3,13 @@ class Spinner {
     console.log(error, errorInfo);
   }
 
-  reset(prevProps, parentStyle, ape) {
-    const {ctx} = ape;
-    // parentStyle.backgroundColor // white
-    if (ctx) {
-      ctx.clearRect(0, 0, 18, 18);
-    }
-  }
+  // You can also use your own clear function although isn't recommended
+  // unsafeClear(prevProps, parentStyle, ape) {
+  //   const {ctx} = ape;
+  //   const parentBackgroundColor = parentStyle.style.backgroundColor;
+  //   const newProps = {...prevProps, style: { color: parentBackgroundColor } };
+  //   this.render(newProps, ape);
+  // }
 
   render(props, ape) {
     const {ctx} = ape;
@@ -18,24 +18,13 @@ class Spinner {
 
     const offset = 8;
     ctx.save();
-    // ctx.translate(offset, offset);
     ctx.translate(style.left, style.top);
     ctx.rotate(degrees);
-
-    // Draw half open circle
     ctx.beginPath();
-    ctx.lineWidth = 3;
+    ctx.lineWidth = 50;
     ctx.arc(8 - offset, 8 - offset, 6, 0, 1.75 * Math.PI);
     ctx.strokeStyle = color;
     ctx.stroke();
-
-    // Draw arrowhead
-    ctx.lineWidth = 3;
-    ctx.moveTo(13 - offset, 1 - offset);
-    ctx.lineTo(9 - offset, 5 - offset);
-    ctx.lineTo(13 - offset, 5 - offset);
-    ctx.lineTo(13 - offset, 1 - offset);
-    ctx.stroke();
     ctx.restore();
   }
 }

packages/react-ape/modules/Register/index.js

@@ -20,13 +20,14 @@ function registerComponent(componentName, Component) {
         isResetPhase: true,
       };
 
+      console.log('clearRender');
       Component.render(clearProps, apeContext, parentLayout);
     };
 
     return {
       type: componentName,
       render: Component.render.bind(this, props),
-      clear: Component.reset || clearRender,
+      clear: Component.unsafeClear || clearRender,
     };
   };
 

packages/react-ape/renderer/core/render.js

@@ -22,11 +22,19 @@ function renderApeQueue(
   onFinish: () => mixed
 ) {
   if (apeContextGlobal && apeContextGlobal.renderQueue.length) {
-    // TODO: Move to request animation frame
+    // const renderFrame = () => {
+    //   requestAnimationFrame(renderFrame);
+    //   apeContextGlobal.renderQueue.forEach(element => {
+    //     // element.render(apeContextGlobal, element.parentLayout)
+    //     renderApeElement(apeContextGlobal, element);
+    //   });
+    //   cancelAnimationFrame(renderFrame);
+    // }
+    // renderFrame();
+
     apeContextGlobal.renderQueue.forEach(element => {
       renderApeElement(apeContextGlobal, element);
     });
-
     onFinish();
   }
 }