WIP

src/App.tsx

@@ -91,16 +91,14 @@ class App extends React.Component<IProps, IState> {
     api.rpc.chain.subscribeNewHeads((header: Header) =>
       this.handleBlock(api, header)
     );
-    this.enqueue("members", () =>
-      this.fetchMembers(api, Number(status.member))
-    );
-    this.enqueue("councils", () => this.fetchCouncils(api, round));
-    this.enqueue("proposals", () => this.fetchProposals(api));
-    this.enqueue("validators", () => this.fetchValidators(api));
-    this.enqueue("nominators", () => this.fetchNominators(api));
-    //this.enqueue("categories", () => this.fetchCategories(api));
-    //this.enqueue("threads", () => this.fetchThreads(api, status.thread));
-    this.enqueue("posts", () => this.fetchPosts(api, status.post));
+    //this.enqueue("members", () =>      this.fetchMembers(api, Number(status.member)) );
+    //    this.enqueue("councils", () => this.fetchCouncils(api, round));
+    //    this.enqueue("proposals", () => this.fetchProposals(api));
+    //    this.enqueue("validators", () => this.fetchValidators(api));
+    //    this.enqueue("nominators", () => this.fetchNominators(api));
+    //    this.enqueue("categories", () => this.fetchCategories(api));
+    //    this.enqueue("threads", () => this.fetchThreads(api, status.thread));
+    //    this.enqueue("posts", () => this.fetchPosts(api, status.post));
     //this.enqueue("channels", () => this.fetchChannels(api, status.channel));
   }
 
@@ -125,8 +123,9 @@ class App extends React.Component<IProps, IState> {
       this.fetchLastReward(api, era - 1);
     } else if (!status.lastReward) this.fetchLastReward(api, era);
 
-    // every minute
-    if (id / 10 === (id / 10).toFixed()) {
+    if (id / 10 === Math.floor(id / 10)) {
+      console.debug(`Updating cache`); // every minute (10 blocks)
+      status.loading = "data";
       this.updateCouncil(api, id);
       status.proposals = await this.fetchProposals(api, status.proposals);
       status.posts = await this.fetchPosts(api, status.posts);
@@ -142,10 +141,11 @@ class App extends React.Component<IProps, IState> {
 
   async updateCouncil(api, id) {
     let { status } = this.state;
+    if (!status.council) return;
     if (id < status.council.termEndsAt || id < status.council.stageEndsAt)
       return;
-    round = Number((await api.query.councilElection.round()).toJSON());
-    stage = await api.query.councilElection.stage();
+    const round = Number((await api.query.councilElection.round()).toJSON());
+    const stage = await api.query.councilElection.stage();
     const json = stage.toJSON();
     const key = Object.keys(json)[0];
     const stageEndsAt = json[key];
@@ -621,7 +621,7 @@ class App extends React.Component<IProps, IState> {
   async loadData() {
     const status = this.load("status");
     if (status && status.version !== version) return this.clearData();
-    this.setState({ status });
+    if (status) this.setState({ status });
     console.debug(`Loading data`);
     this.loadMembers();
     this.loadCouncils();

src/components/Council/ElectionStatus.tsx

@@ -12,8 +12,9 @@ const timeLeft = (blocks: number) => {
 const ElectionStage = (props: {
   block: number;
   council: { stage; termEndsAt: number };
+  domain: string;
 }) => {
-  const { block, council } = props;
+  const { block, council, domain } = props;
   if (!council) return <div>Loading..</div>;
   const { stage, termEndsAt } = council;
 
@@ -41,13 +42,15 @@ const ElectionStage = (props: {
 
 const ElectionStatus = (props: { domain: string; status: Status }) => {
   const { domain, status } = props;
-  //if (!status.council) return <div />;
+  const { block } = status;
+  if (!block || !status.council) return <div />;
+
   return (
     <div className="position-absolute text-left text-light">
       <ElectionStage
         domain={domain}
         council={status.council}
-        block={status.block.id}
+        block={block.id}
       />
     </div>
   );

src/components/Council/index.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import ElectionStatus from "./ElectionStatus";
 import MemberBox from "../Members/MemberBox";
+import Loading from "../Loading";
+
 import {
   Handles,
   Member,
@@ -22,7 +24,7 @@ const Council = (props: {
 }) => {
   const { councils, status, members, handles, posts, proposals } = props;
   const council = councils[councils.length - 1];
-  if (!status || !council) return <div />;
+  if (!council) return <Loading target="council" />;
   const third = Math.floor(council.length / 3);
 
   return (

src/components/Dashboard/index.tsx

@@ -36,8 +36,6 @@ const Dashboard = (props: IProps) => {
   } = props;
   const userLink = `${domain}/#/members/joystreamstats`;
 
-  //console.log(`status`, status);
-
   return (
     <div className="w-100 flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
       <div className="back bg-warning d-flex flex-column p-2">
@@ -74,25 +72,23 @@ const Dashboard = (props: IProps) => {
 
       <Forum posts={posts} threads={threads} startTime={status.startTime} />
 
-      <div className="w-100 p-3 m-3">
-        <Validators
-          hideBackButton={true}
-          toggleStar={toggleStar}
-          councils={councils}
-          handles={handles}
-          members={members}
-          posts={posts}
-          proposals={proposals}
-          nominators={nominators}
-          validators={validators}
-          stashes={stashes}
-          stars={stars}
-          stakes={stakes}
-          rewardPoints={rewardPoints}
-          tokenomics={tokenomics}
-          status={status}
-        />
-      </div>
+      <Validators
+        hideBackButton={true}
+        toggleStar={toggleStar}
+        councils={councils}
+        handles={handles}
+        members={members}
+        posts={posts}
+        proposals={proposals}
+        nominators={nominators}
+        validators={validators}
+        stashes={stashes}
+        stars={stars}
+        stakes={stakes}
+        rewardPoints={rewardPoints}
+        tokenomics={tokenomics}
+        status={status}
+      />
 
       <Footer
         show={!hideFooter}

src/components/Loading.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Spinner } from "react-bootstrap";
 
-const Loading = () => {
+const Loading = (props: { target?: string }) => {
+  const { target } = props;
   return (
-    <div className="h-100 d-flex flex-column flex-grow-1 align-items-center justify-content-center">
+    <div className="h-100 d-flex flex-column flex-grow-1 align-items-center justify-content-center p-1">
       <Spinner
-        animation="grow"
+        animation="border"
         variant="light"
-        title="Connecting to Websocket"
+        title={target ? `Loading ${target}` : "Connecting to Websocket"}
       />
     </div>
   );

src/components/Validators/index.tsx

@@ -4,6 +4,7 @@ import Stats from "./MinMax";
 import Validator from "./Validator";
 import Waiting from "./Waiting";
 import { Back } from "..";
+import Loading from "../Loading";
 
 import {
   Handles,
@@ -127,7 +128,7 @@ class Validators extends Component<IProps, IState> {
       tokenomics,
     } = this.props;
 
-    if (!status || !status.block) return <div />;
+    if (!status || !status.block) return <Loading />;
 
     const { lastReward, block, era, startTime } = status;
     const { sortBy, showWaiting, showValidators } = this.state;
@@ -139,10 +140,10 @@ class Validators extends Component<IProps, IState> {
     const unstarred = validators.filter((v) => !stars[v]);
     const waiting = stashes.filter((s) => !stars[s] && !validators.includes(s));
 
-    if (!unstarred.length) return <div />;
+    if (!unstarred.length) return <Loading target="validators" />;
 
     return (
-      <div className="box w-100 mx-5">
+      <div className="box w-100 m-3 mx-5 p-3">
         <Back hide={hideBackButton} history={history} />
         <h3 onClick={() => this.toggleValidators()}>Validator Stats</h3>