Initial loader code

main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"bytes"
+	"time"
 
 	"github.com/divan/graphx/formats"
 	"github.com/divan/graphx/layout"
@@ -10,6 +11,7 @@ import (
 	"github.com/gopherjs/vecty/elem"
 	"github.com/gopherjs/vecty/event"
 	"github.com/lngramos/three"
+	"github.com/status-im/whispervis/widgets"
 	"github.com/vecty/vthree"
 )
 
@@ -21,16 +23,27 @@ func main() {
 	}
 
 	l := layout.NewAuto(data)
-	l.CalculateN(50)
-
+	steps := 50
 	page := &Page{
 		layout: l,
+		loader: widgets.NewLoader(steps),
 	}
 
 	vecty.SetTitle("Whisper Simulation")
 	vecty.AddStylesheet("css/pure-min.css")
 	vecty.AddStylesheet("css/controls.css")
 	vecty.RenderBody(page)
+
+	go func() {
+		time.Sleep(1 * time.Second)
+		for i := 0; i < steps; i++ {
+			l.UpdatePositions()
+			page.loader.Inc()
+			vecty.Rerender(page.loader)
+		}
+		page.loaded = true
+		vecty.Rerender(page)
+	}()
 }
 
 // Page is our main page component.
@@ -48,6 +61,9 @@ type Page struct {
 	controls TrackBallControl
 
 	autoRotate bool
+
+	loaded bool
+	loader *widgets.Loader
 }
 
 // Render implements the vecty.Component interface.
@@ -63,10 +79,13 @@ func (p *Page) Render() vecty.ComponentOrHTML {
 			),
 			elem.Div(
 				vecty.Markup(vecty.Class("pure-u-4-5")),
-				vthree.WebGLRenderer(vthree.WebGLOptions{
-					Init:     p.init,
-					Shutdown: p.shutdown,
-				}),
+				vecty.If(p.loaded,
+					vthree.WebGLRenderer(vthree.WebGLOptions{
+						Init:     p.init,
+						Shutdown: p.shutdown,
+					}),
+				),
+				vecty.If(!p.loaded, p.loader),
 			),
 		),
 		vecty.Markup(
@@ -75,6 +94,13 @@ func (p *Page) Render() vecty.ComponentOrHTML {
 	)
 }
 
+func (p *Page) renderWebGLCanvas() vecty.Component {
+	return vthree.WebGLRenderer(vthree.WebGLOptions{
+		Init:     p.init,
+		Shutdown: p.shutdown,
+	})
+}
+
 func (p *Page) init(renderer *three.WebGLRenderer) {
 	windowWidth := js.Global.Get("innerWidth").Float()*80/100 - 20
 	windowHeight := js.Global.Get("innerHeight").Float() - 20

widgets/loader.go

@@ -0,0 +1,46 @@
+package widgets
+
+import (
+	"fmt"
+
+	"github.com/gopherjs/vecty"
+	"github.com/gopherjs/vecty/elem"
+)
+
+type Loader struct {
+	vecty.Core
+
+	steps   int
+	current int
+}
+
+func (l *Loader) Render() vecty.ComponentOrHTML {
+	var text string
+	progress := l.Progress()
+	if progress > 99.9 {
+		text = "Completed"
+	} else {
+		text = fmt.Sprintf("Loading %.1f%%...", progress)
+		fmt.Println("Loader.Render()", text, progress)
+	}
+	return elem.Div(
+		elem.Heading1(vecty.Text(text)),
+	)
+}
+
+func NewLoader(steps int) *Loader {
+	return &Loader{
+		steps: steps,
+	}
+}
+
+func (l *Loader) Inc() {
+	l.current++
+	vecty.Rerender(l)
+}
+
+// Progress reports loader's progress in percentage.
+func (l *Loader) Progress() float64 {
+	fmt.Println("progress", 100*float64(l.current)/float64(l.steps))
+	return 100 * float64(l.current) / float64(l.steps)
+}