From 286f523fd95319568b7e923e664a3a7e45033bbd Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 30 Aug 2022 14:08:55 -0700
Subject: [PATCH] render app loading indicator

---
 net/web/src/session/Session.jsx               | 23 ++++++++++++++++++-
 net/web/src/session/Session.styled.js         |  9 ++++++++
 .../conversation/useConversation.hook.js      |  4 ++++
 net/web/src/session/useSession.hook.js        | 14 +++++++++++
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index 86449882..7a8bf4bb 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useContext } from 'react';
-import { Drawer } from 'antd';
+import { Drawer, Spin } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { SessionWrapper } from './Session.styled';
 import { AppContext } from 'context/AppContext';
@@ -76,6 +76,13 @@ export function Session() {
             <div class="bottom">
               <Channels open={openConversation} />
             </div>
+            { state.loading && (
+              <div class="reframe">
+                <div class="spinner">
+                  <Spin size="large" />
+                </div>
+              </div>
+            )}
           </div>
           <div class="center">
             <div class="reframe">
@@ -131,6 +138,13 @@ export function Session() {
             <div class="bottom">
               <Channels open={actions.openConversation} />
             </div>
+            { state.loading && (
+              <div class="reframe">
+                <div class="spinner">
+                  <Spin size="large" />
+                </div>
+              </div>
+            )}
           </div>
           <div class="right">
             <div class="reframe">
@@ -210,6 +224,13 @@ export function Session() {
                 <Profile />
               </div>
             )}
+            { state.loading && (
+              <div class="reframe">
+                <div class="spinner">
+                  <Spin size="large" />
+                </div>
+              </div>
+            )}
           </div>
           <div class="bottom">
             <BottomNav state={state} actions={actions} />
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
index a846acd4..2797aa80 100644
--- a/net/web/src/session/Session.styled.js
+++ b/net/web/src/session/Session.styled.js
@@ -9,6 +9,15 @@ export const SessionWrapper = styled.div`
     width: 100%;
     height: 100%;
     z-index: 2;
+
+    .spinner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0,0,0,0.1);
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .desktop-layout {
diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js
index ab91accc..37210510 100644
--- a/net/web/src/session/conversation/useConversation.hook.js
+++ b/net/web/src/session/conversation/useConversation.hook.js
@@ -4,6 +4,7 @@ import { CardContext } from 'context/CardContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { UploadContext } from 'context/UploadContext';
+import { StoreContext } from 'context/StoreContext';
 
 export function useConversation(cardId, channelId) {
 
@@ -25,6 +26,7 @@ export function useConversation(cardId, channelId) {
   const channel = useContext(ChannelContext);
   const conversation = useContext(ConversationContext);
   const upload = useContext(UploadContext);
+  const store = useContext(StoreContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -119,6 +121,8 @@ export function useConversation(cardId, channelId) {
     });
     const { loadingInit, loadingMore } = conversation.state;
     updateState({ topics, loadingInit, loadingMore });
+    store.actions.setValue(`${channelId}::${cardId}`, Number(conversation.state.revision));
+ 
   }, [conversation]);
 
   const actions = {
diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js
index 9f4aafab..3380ae5a 100644
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@@ -2,6 +2,8 @@ import { useContext, useState, useEffect, useRef } from 'react';
 import { CardContext } from 'context/CardContext';
 import { StoreContext } from 'context/StoreContext';
 import { ViewportContext } from 'context/ViewportContext';
+import { ProfileContext } from 'context/ProfileContext';
+import { ChannelContext } from 'context/ChannelContext';
 
 export function useSession() {
 
@@ -18,11 +20,14 @@ export function useSession() {
     contact: false,
     profile: false,
     account: false,
+    loading: false,
   });
 
   const card = useContext(CardContext);
   const store = useContext(StoreContext);
   const viewport = useContext(ViewportContext);
+  const channel = useContext(ChannelContext);
+  const profile = useContext(ProfileContext);
   
   const storeStatus = useRef(null);
   const cardStatus = useRef(null);
@@ -31,6 +36,15 @@ export function useSession() {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    if (!profile.state.init || !card.state.init || !channel.state.init) {
+      updateState({ loading: true });
+    }
+    else {
+      updateState({ loading: false });
+    }
+  }, [card, channel, profile]);
+
   useEffect(() => {
     updateState({ display: viewport.state.display });
   }, [viewport]);