add loader property

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] 2022-08-08
+
+### Added
+
+- `loader` provider property, to define custom component for loading state
+
 ## [0.1.1] 2022-08-04
 
 ### Added

dist/index.d.ts

@@ -22,6 +22,7 @@ export declare type GrinderyLoginContextProps = {
 };
 export declare type GrinderyLoginProviderProps = {
     children: React.ReactNode;
+    loader?: React.ReactNode;
 };
 /** Grindery Nexus Context */
 export declare const GrinderyLoginContext: React.Context<GrinderyLoginContextProps>;
@@ -34,7 +35,7 @@ export declare const GrinderyLoginContext: React.Context<GrinderyLoginContextPro
  *
  * It also exposes the context via the useGrinderyLogin hook.
  */
-export declare const GrinderyLoginProvider: ({ children, }: GrinderyLoginProviderProps) => React.JSX.Element;
+export declare const GrinderyLoginProvider: ({ children, loader, }: GrinderyLoginProviderProps) => React.JSX.Element;
 /** Grindery Login Hook */
 export declare const useGrinderyLogin: () => GrinderyLoginContextProps;
 export default GrinderyLoginProvider;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "use-grindery-login",
   "author": "milukove",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/index.tsx

@@ -49,6 +49,7 @@ export type GrinderyLoginContextProps = {
 
 export type GrinderyLoginProviderProps = {
   children: React.ReactNode;
+  loader?: React.ReactNode;
 };
 
 // Default context properties
@@ -77,6 +78,7 @@ export const GrinderyLoginContext = createContext<GrinderyLoginContextProps>(
  */
 export const GrinderyLoginProvider = ({
   children,
+  loader,
 }: GrinderyLoginProviderProps) => {
   // Authentication token object
   const [token, setToken] = useState<AuthToken | null>(null);
@@ -90,6 +92,9 @@ export const GrinderyLoginProvider = ({
   // User authentication loading state
   const [isAuthenticating, setIsAuthenticating] = useState<boolean>(true);
 
+  // Loading state
+  const [loading, setLoading] = React.useState(true);
+
   // Connect user
   const connect = async () => {
     const currentUrl = window.location.href.split('?')[0];
@@ -174,6 +179,24 @@ export const GrinderyLoginProvider = ({
     identifyUser();
   }, [identifyUser]);
 
+  useEffect(() => {
+    if (!isAuthenticating) {
+      setTimeout(() => {
+        if (token?.access_token) {
+          setLoading(false);
+        } else {
+          connect();
+        }
+      }, 1000);
+    }
+  }, [token, isAuthenticating, connect]);
+
+  useEffect(() => {
+    if (!token?.access_token) {
+      setLoading(true);
+    }
+  }, [token]);
+
   return (
     <GrinderyLoginContext.Provider
       value={{
@@ -192,7 +215,7 @@ export const GrinderyLoginProvider = ({
         src={`${LOGIN_URL}/session`}
         style={{ display: 'none' }}
       />
-      {children}
+      {loading && loader ? loader : children}
     </GrinderyLoginContext.Provider>
   );
 };