Implement progress indicator (#1123)

* Show waiting indicator in timeline page

* Show text when no squeaks found in timeline

* Update frontend build

frontend/src/pages/timeline/Timeline.js

@@ -4,6 +4,10 @@ import {
   Grid,
   Button,
   Fab,
+  CircularProgress,
+  Backdrop,
+  CardHeader,
+  Card,
 } from '@material-ui/core';
 import { useTheme } from '@material-ui/styles';
 
@@ -32,11 +36,13 @@ export default function TimelinePage() {
   const [squeaks, setSqueaks] = useState([]);
   const [open, setOpen] = React.useState(false);
   const [network, setNetwork] = useState('');
+  const [waitingForTimeline, setWaitingForTimeline] = React.useState(false);
 
   const history = useHistory();
 
-  const getSqueaks = () => {
-    getTimelineSqueakDisplaysRequest(SQUEAKS_PER_PAGE, null, null, null, setSqueaks);
+  const getSqueaks = (limit, blockHeight, squeakTime, squeakHash) => {
+    setWaitingForTimeline(true);
+    getTimelineSqueakDisplaysRequest(limit, blockHeight, squeakTime, squeakHash, handleLoadedTimeline, alertFailedRequest);
   };
   const getNetwork = () => {
     getNetworkRequest(setNetwork);
@@ -50,8 +56,17 @@ export default function TimelinePage() {
     setOpen(false);
   };
 
+  const alertFailedRequest = () => {
+    alert('Failed to load timeline.');
+  };
+
+  const handleLoadedTimeline = (loadedSqueaks) => {
+    setWaitingForTimeline(false);
+    setSqueaks(squeaks.concat(loadedSqueaks));
+  };
+
   useEffect(() => {
-    getSqueaks(setSqueaks);
+    getSqueaks(SQUEAKS_PER_PAGE, null, null, null);
   }, []);
   useEffect(() => {
     getNetwork();
@@ -59,9 +74,21 @@ export default function TimelinePage() {
 
   function NoSqueaksContent() {
     return (
-      <div>
-        Unable to load squeaks.
-      </div>
+      <Card
+        className={classes.root}
+      >
+        <CardHeader
+          subheader="No squeaks found in timeline. Try following your friends or add your own squeaks."
+        />
+      </Card>
+    );
+  }
+
+  function LoadingContent() {
+    return (
+      <Backdrop className={classes.backdrop} open={waitingForTimeline} >
+        <CircularProgress color="inherit" />
+      </Backdrop>
     );
   }
 
@@ -101,14 +128,7 @@ export default function TimelinePage() {
                 const latestSqueakHeight = (latestSqueak ? latestSqueak.getBlockHeight() : null);
                 const latestSqueakTime = (latestSqueak ? latestSqueak.getSqueakTime() : null);
                 const latestSqueakHash = (latestSqueak ? latestSqueak.getSqueakHash() : null);
-                console.log(latestSqueakHeight);
-                console.log(latestSqueakTime);
-                console.log(latestSqueakHash);
-                getTimelineSqueakDisplaysRequest(SQUEAKS_PER_PAGE, latestSqueakHeight, latestSqueakTime, latestSqueakHash, (resp) => {
-                // TODO: nothing maybe
-                  console.log(resp);
-                  setSqueaks(squeaks.concat(resp));
-                });
+                getSqueaks(SQUEAKS_PER_PAGE, latestSqueakHeight, latestSqueakTime, latestSqueakHash);
               }}
             >
               <ReplayIcon />
@@ -125,7 +145,7 @@ export default function TimelinePage() {
       <Grid container spacing={0}>
         <Grid item xs={12} sm={9}>
           <Paper className={classes.paper}>
-            {(squeaks)
+            {(squeaks.length > 0)
               ? SqueaksContent()
               : NoSqueaksContent()}
           </Paper>
@@ -145,6 +165,7 @@ export default function TimelinePage() {
       </Fab>
 
       {MakeSqueakDialogContent()}
+      {LoadingContent()}
     </>
   );
 }

frontend/src/pages/timeline/styles.js

@@ -1,5 +1,7 @@
 import { makeStyles } from '@material-ui/styles';
 
+import { green } from '@material-ui/core/colors';
+
 export default makeStyles((theme) => ({
   dashedBorder: {
     border: '1px dashed',
@@ -17,4 +19,7 @@ export default makeStyles((theme) => ({
     bottom: theme.spacing(4),
     right: theme.spacing(4),
   },
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+  },
 }));

frontend/src/squeakclient/requests.js

@@ -102,14 +102,18 @@ export function getUserRequest(handleResponse) {
   });
 }
 
-export function getTimelineSqueakDisplaysRequest(limit, blockHeight, squeakTime, squeakHash, handleResponse) {
+export function getTimelineSqueakDisplaysRequest(limit, blockHeight, squeakTime, squeakHash, handleResponse, handleErr) {
   const request = new GetTimelineSqueakDisplaysRequest();
   request.setLimit(limit);
   request.setBlockHeight(blockHeight);
   request.setSqueakTime(squeakTime);
   request.setSqueakHash(squeakHash);
   client.getTimelineSqueakDisplays(request, {}, (err, response) => {
-    handleResponse(response.getSqueakDisplayEntriesList());
+    if (err) {
+      handleErr(err);
+    } else {
+      handleResponse(response.getSqueakDisplayEntriesList());
+    }
   });
 }
 

squeaknode/admin/webapp/static/build/asset-manifest.json

@@ -1,25 +1,25 @@
 {
   "files": {
-    "main.js": "/static/js/main.06f284fc.chunk.js",
-    "main.js.map": "/static/js/main.06f284fc.chunk.js.map",
+    "main.js": "/static/js/main.8e146e4d.chunk.js",
+    "main.js.map": "/static/js/main.8e146e4d.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.9f0ba400.js",
     "runtime-main.js.map": "/static/js/runtime-main.9f0ba400.js.map",
-    "static/css/2.ea4ba2f0.chunk.css": "/static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.9773e69b.chunk.js": "/static/js/2.9773e69b.chunk.js",
-    "static/js/2.9773e69b.chunk.js.map": "/static/js/2.9773e69b.chunk.js.map",
+    "static/css/2.15110fae.chunk.css": "/static/css/2.15110fae.chunk.css",
+    "static/js/2.1bf60d33.chunk.js": "/static/js/2.1bf60d33.chunk.js",
+    "static/js/2.1bf60d33.chunk.js.map": "/static/js/2.1bf60d33.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.9c4e0e75e76ff8048a53c6287bba9636.js": "/precache-manifest.9c4e0e75e76ff8048a53c6287bba9636.js",
+    "precache-manifest.ae881ac03dee3a234d4ad4a3d4db2729.js": "/precache-manifest.ae881ac03dee3a234d4ad4a3d4db2729.js",
     "service-worker.js": "/service-worker.js",
-    "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
-    "static/js/2.9773e69b.chunk.js.LICENSE.txt": "/static/js/2.9773e69b.chunk.js.LICENSE.txt",
+    "static/css/2.15110fae.chunk.css.map": "/static/css/2.15110fae.chunk.css.map",
+    "static/js/2.1bf60d33.chunk.js.LICENSE.txt": "/static/js/2.1bf60d33.chunk.js.LICENSE.txt",
     "static/media/font-awesome.min.css": "/static/media/fontawesome-webfont.fee66e71.woff",
     "static/media/google.svg": "/static/media/google.695a3160.svg",
     "static/media/logo.svg": "/static/media/logo.a0185b04.svg"
   },
   "entrypoints": [
     "static/js/runtime-main.9f0ba400.js",
-    "static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.9773e69b.chunk.js",
-    "static/js/main.06f284fc.chunk.js"
+    "static/css/2.15110fae.chunk.css",
+    "static/js/2.1bf60d33.chunk.js",
+    "static/js/main.8e146e4d.chunk.js"
   ]
 }

squeaknode/admin/webapp/static/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.9773e69b.chunk.js"></script><script src="/static/js/main.06f284fc.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.15110fae.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.1bf60d33.chunk.js"></script><script src="/static/js/main.8e146e4d.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.ae881ac03dee3a234d4ad4a3d4db2729.js

@@ -1,23 +1,23 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "2449b8de898a407e8bb665bfeab5d25d",
+    "revision": "5ef340c7f805728cc403500b68a4a994",
     "url": "/index.html"
   },
   {
-    "revision": "380aef1bf9eaf28c29e1",
-    "url": "/static/css/2.ea4ba2f0.chunk.css"
+    "revision": "045c661287cfdd6b3da3",
+    "url": "/static/css/2.15110fae.chunk.css"
   },
   {
-    "revision": "380aef1bf9eaf28c29e1",
-    "url": "/static/js/2.9773e69b.chunk.js"
+    "revision": "045c661287cfdd6b3da3",
+    "url": "/static/js/2.1bf60d33.chunk.js"
   },
   {
     "revision": "279b8724b89bf7d504758b3fa917239f",
-    "url": "/static/js/2.9773e69b.chunk.js.LICENSE.txt"
+    "url": "/static/js/2.1bf60d33.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "c4b903fdf0a7f13e8522",
-    "url": "/static/js/main.06f284fc.chunk.js"
+    "revision": "fee7a1ce186f79d416f0",
+    "url": "/static/js/main.8e146e4d.chunk.js"
   },
   {
     "revision": "cc9816de5a8639d377ea",

squeaknode/admin/webapp/static/build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.9c4e0e75e76ff8048a53c6287bba9636.js"
+  "/precache-manifest.ae881ac03dee3a234d4ad4a3d4db2729.js"
 );
 
 self.addEventListener('message', (event) => {