Fix clear data with loading spinner and add a line on onion path modal

config/default.json

@@ -5,15 +5,15 @@
   "contentProxyUrl": "",
   "seedNodeList": [
     {
-      "ip_url": "http://116.203.53.213:4433/",
+      "ip_url": "https://116.203.53.213:4433/",
       "url": "https://storage.seed1.loki.network:4433/"
     },
     {
-      "ip_url": "http://212.199.114.66:4433/",
+      "ip_url": "https://212.199.114.66:4433/",
       "url": "https://storage.seed3.loki.network:4433/"
     },
     {
-      "ip_url": "http://144.76.164.202:4433/",
+      "ip_url": "https://144.76.164.202:4433/",
       "url": "https://public.loki.foundation:4433/"
     }
   ],

stylesheets/_session.scss

@@ -470,6 +470,7 @@ label {
     }
     &__close > div {
       float: left;
+      padding: $session-margin-xs;
       margin: 0px;
     }
     &__icons > div {
@@ -1203,21 +1204,49 @@ input {
   flex-direction: column;
   margin: $session-margin-sm;
   align-items: flex-start;
+  position: relative;
 
   .onion__node {
     display: flex;
     flex-grow: 1;
     align-items: center;
     margin: $session-margin-xs;
 
-    * {
-      margin: $session-margin-sm;
+    &:nth-child(2) {
+      margin-top: 0;
+    }
+
+    &:nth-last-child(2) {
+      margin-bottom: 0;
     }
 
     .session-icon-button {
       margin: $session-margin-sm !important;
     }
   }
+
+  .onion__node-list-lights {
+    position: relative;
+  }
+  .onion__node__country {
+    margin: $session-margin-sm;
+  }
+
+  .onion__growing-icon {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .onion__vertical-line {
+    background: $onionPathLineColor;
+    position: absolute;
+    height: calc(100% - 2 * 15px);
+    margin: 15px calc(100% / 2 - 1px);
+
+    width: 1px;
+    // z-index: -1;
+  }
 }
 
 .session-nickname-wrapper {

stylesheets/themes.scss

@@ -11,6 +11,8 @@ $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this expos
 $borderDarkTheme: rgba($white, 0.06);
 $inputBackgroundColor: #8e8e93;
 
+$onionPathLineColor: rgba(#7a7a7a, 0.6);
+
 $borderAvatarColor: unquote(
   '#00000059'
 ); // search for references on ts TODO: make this exposed on ts

ts/components/OnionStatusPathDialog.tsx

@@ -8,7 +8,6 @@ import Electron from 'electron';
 const { shell } = Electron;
 
 import { useDispatch, useSelector } from 'react-redux';
-import { StateType } from '../state/reducer';
 import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
 
 import { SessionWrapperModal } from './session/SessionWrapperModal';
@@ -27,6 +26,7 @@ import {
 // tslint:disable-next-line: no-submodule-imports
 import useNetworkState from 'react-use/lib/useNetworkState';
 import { SessionSpinner } from './session/SessionSpinner';
+import { Flex } from './basic/Flex';
 
 export type StatusLightType = {
   glowStartDelay: number;
@@ -56,53 +56,57 @@ const OnionPathModalInner = () => {
     <>
       <p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
       <div className="onion__node-list">
-        {nodes.map((snode: Snode | any, index: number) => {
-          return (
-            <OnionNodeStatusLight
-              glowDuration={glowDuration}
-              glowStartDelay={index}
-              label={snode.label}
-              snode={snode}
-              key={index}
-            />
-          );
-        })}
+        <Flex container={true}>
+          <div className="onion__node-list-lights">
+            <div className="onion__vertical-line" />
+
+            <Flex container={true} flexDirection="column" alignItems="center" height="100%">
+              {nodes.map((_snode: Snode | any, index: number) => {
+                return (
+                  <OnionNodeStatusLight
+                    glowDuration={glowDuration}
+                    glowStartDelay={index}
+                    key={index}
+                  />
+                );
+              })}
+            </Flex>
+          </div>
+          <Flex container={true} flexDirection="column" alignItems="flex-start">
+            {nodes.map((snode: Snode | any, index: number) => {
+              let labelText = snode.label
+                ? snode.label
+                : countryLookup.byIso(ip2country(snode.ip))?.country;
+              if (!labelText) {
+                labelText = window.i18n('unknownCountry');
+              }
+              return labelText ? <div className="onion__node__country">{labelText}</div> : null;
+            })}
+          </Flex>
+        </Flex>
       </div>
     </>
   );
 };
 
 export type OnionNodeStatusLightType = {
-  snode: Snode;
-  label?: string;
   glowStartDelay: number;
   glowDuration: number;
 };
 
 /**
- * Component containing a coloured status light and an adjacent country label.
+ * Component containing a coloured status light.
  */
 export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Element => {
-  const { snode, label, glowStartDelay, glowDuration } = props;
+  const { glowStartDelay, glowDuration } = props;
   const theme = useTheme();
 
-  let labelText = label ? label : countryLookup.byIso(ip2country(snode.ip))?.country;
-  if (!labelText) {
-    labelText = window.i18n('unknownCountry');
-  }
   return (
-    <div className="onion__node">
-      <ModalStatusLight
-        glowDuration={glowDuration}
-        glowStartDelay={glowStartDelay}
-        color={theme.colors.accent}
-      />
-      {labelText ? (
-        <>
-          <div className="onion-node__country">{labelText}</div>
-        </>
-      ) : null}
-    </div>
+    <ModalStatusLight
+      glowDuration={glowDuration}
+      glowStartDelay={glowStartDelay}
+      color={theme.colors.accent}
+    />
   );
 };
 
@@ -114,15 +118,17 @@ export const ModalStatusLight = (props: StatusLightType) => {
   const theme = useSelector(getTheme);
 
   return (
-    <SessionIcon
-      borderRadius={50}
-      iconColor={color}
-      glowDuration={glowDuration}
-      glowStartDelay={glowStartDelay}
-      iconType={SessionIconType.Circle}
-      iconSize={SessionIconSize.Small}
-      theme={theme}
-    />
+    <div className="onion__growing-icon">
+      <SessionIcon
+        borderRadius={50}
+        iconColor={color}
+        glowDuration={glowDuration}
+        glowStartDelay={glowStartDelay}
+        iconType={SessionIconType.Circle}
+        iconSize={SessionIconSize.Tiny}
+        theme={theme}
+      />
+    </div>
   );
 };
 
@@ -154,7 +160,7 @@ export const ActionPanelOnionStatusLight = (props: {
 
   return (
     <SessionIconButton
-      iconSize={SessionIconSize.Medium}
+      iconSize={SessionIconSize.Small}
       iconType={SessionIconType.Circle}
       iconColor={iconColor}
       onClick={handleClick}

ts/components/conversation/AdminLeaveClosedGroupDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
@@ -16,11 +16,15 @@ export const AdminLeaveClosedGroupDialog = (props: Props) => {
   const warningAsAdmin = `${window.i18n('leaveGroupConfirmationAdmin')}`;
   const okText = window.i18n('leaveAndRemoveForEveryone');
   const cancelText = window.i18n('cancel');
+  const [isLoading, setIsLoading] = useState(false);
 
   const onClickOK = async () => {
+    setIsLoading(true);
     await getConversationController()
       .get(props.conversationId)
       .leaveClosedGroup();
+    setIsLoading(false);
+
     closeDialog();
   };
 

ts/components/session/LeftPaneSettingSection.tsx

@@ -120,7 +120,6 @@ const onDeleteAccount = () => {
       okTheme: SessionButtonColor.Danger,
       onClickOk: deleteAccount,
       onClickClose,
-      closeAfterClickOk: true,
     })
   );
 };

ts/components/session/SessionConfirm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SessionModal } from './SessionModal';
 import { SessionButton, SessionButtonColor } from './SessionButton';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
@@ -9,6 +9,7 @@ import { useDispatch } from 'react-redux';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { update } from 'lodash';
 import { SpacerLG } from '../basic/Text';
+import { SessionSpinner } from './SessionSpinner';
 
 export interface SessionConfirmDialogProps {
   message?: string;
@@ -26,7 +27,6 @@ export interface SessionConfirmDialogProps {
   sessionIcon?: SessionIconType;
   iconSize?: SessionIconSize;
   theme?: DefaultTheme;
-  closeAfterClickOk?: boolean;
   shouldShowConfirm?: () => boolean | undefined;
 }
 
@@ -45,6 +45,8 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
     shouldShowConfirm,
   } = props;
 
+  const [isLoading, setIsLoading] = useState(false);
+
   const okText = props.okText || window.i18n('ok');
   const cancelText = props.cancelText || window.i18n('cancel');
   const showHeader = !!props.title;
@@ -53,9 +55,16 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
 
   const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';
 
-  const onClickOkHandler = () => {
+  const onClickOkHandler = async () => {
     if (onClickOk) {
-      onClickOk();
+      setIsLoading(true);
+      try {
+        await onClickOk();
+      } catch (e) {
+        window.log.warn(e);
+      } finally {
+        setIsLoading(false);
+      }
     }
 
     window.inboxStore?.dispatch(updateConfirmModal(null));
@@ -99,6 +108,8 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
           className="session-confirm-sub-message subtle"
           html={messageSub}
         />
+
+        <SessionSpinner loading={isLoading} />
       </div>
 
       <div className="session-modal__button-group">

ts/components/session/icon/Icons.tsx

@@ -102,8 +102,12 @@ export const icons = {
     ratio: 1,
   },
   [SessionIconType.Circle]: {
-    path: 'M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0',
-    viewBox: '0 0 200 200',
+    path: '\
+    M 0, 50\
+    a 50,50 0 1,1 100,0\
+    a 50,50 0 1,1 -100,0\
+  ',
+    viewBox: '0 0 100 100',
     ratio: 1,
   },
   [SessionIconType.CircleCheck]: {

ts/session/onions/onionPath.ts

@@ -342,7 +342,7 @@ export async function selectGuardNodes(): Promise<Array<Snode>> {
 async function buildNewOnionPathsWorker() {
   window?.log?.info('LokiSnodeAPI::buildNewOnionPaths - building new onion paths...');
 
-  const allNodes = await SnodePool.getRandomSnodePool();
+  let allNodes = await SnodePool.getRandomSnodePool();
 
   if (guardNodes.length === 0) {
     // Not cached, load from DB
@@ -369,7 +369,8 @@ async function buildNewOnionPathsWorker() {
     // TODO: don't throw away potentially good guard nodes
     guardNodes = await exports.selectGuardNodes();
   }
-
+  // be sure to fetch again as that list might have been refreshed by selectGuardNodes
+  allNodes = await SnodePool.getRandomSnodePool();
   // TODO: select one guard node and 2 other nodes randomly
   let otherNodes = _.differenceBy(allNodes, guardNodes, 'pubkey_ed25519');
   if (otherNodes.length < 2) {