Merge pull request #155 from bartolomej/error_handling_loading

Improved error handling & loading

components/Spinner.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+// https://gist.github.com/knowbody/578b35164b69e867ed4913423f6bed30
+export const Spinner = () => (
+  <Svg viewBox="0 0 50 50">
+    <circle
+      className="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      strokeWidth="4"
+    />
+  </Svg>
+);
+
+const Svg = styled.svg`
+  animation: rotate 2s linear infinite;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+
+  & .path {
+    stroke: ${(props) => props.theme.colors.primary};
+    
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;

contexts/AuthnContext.tsx

@@ -4,6 +4,8 @@ import useConnectedAppConfig, {
 } from "hooks/useConnectedAppConfig"
 import React, {createContext, useEffect, useState} from "react"
 import {initializeWallet} from "src/init"
+import {Err} from "../src/comps/err.comp"
+import {Spinner} from "../components/Spinner"
 
 type AuthnContextType = {
   connectedAppConfig: ConnectedAppConfig
@@ -22,6 +24,7 @@ export function AuthnContextProvider({children}: {children: React.ReactNode}) {
   const [error, setError] = useState<string | null>(null)
   const {connectedAppConfig, appScopes} = useConnectedAppConfig()
   const config = useConfig()
+  const isLoading = !isInitialized || !connectedAppConfig
 
   useEffect(() => {
     async function initialize() {
@@ -36,7 +39,9 @@ export function AuthnContextProvider({children}: {children: React.ReactNode}) {
     initialize()
   }, [])
 
-  if (!isInitialized || !connectedAppConfig) return null
+  if (error) return <Err title="Initialization Error" error={error} />
+  if (isLoading) return <Spinner />
+
   const value = {connectedAppConfig, appScopes, initError: error}
 
   return <AuthnContext.Provider value={value}>{children}</AuthnContext.Provider>

contexts/ConfigContext.tsx

@@ -1,5 +1,6 @@
 import React, {createContext, useEffect, useState} from "react"
 import fclConfig from "src/fclConfig"
+import {Spinner} from "../components/Spinner"
 
 interface RuntimeConfig {
   avatarUrl: string
@@ -83,7 +84,7 @@ export function ConfigContextProvider({children}: {children: React.ReactNode}) {
     fetchConfig()
   }, [])
 
-  if (!config) return null
+  if (!config) return <Spinner />
 
   return (
     <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>