feat: sdk loader styles

sdks/js/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/frontier",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A js library for frontier",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -73,6 +73,7 @@
     "axios": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "react-hook-form": "^7.45.2",
+    "react-loading-skeleton": "^3.3.1",
     "sonner": "^0.6.2",
     "yup": "^1.2.0"
   },
@@ -96,4 +97,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

sdks/js/packages/core/react/components/organization/domain/add-domain.tsx

@@ -71,6 +71,7 @@ export const AddDomain = () => {
 
             <Image
               alt="cross"
+              style={{ cursor: 'pointer' }}
               // @ts-ignore
               src={cross}
               onClick={() => navigate({ to: '/domains' })}

sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx

@@ -5,26 +5,33 @@ import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1Domain } from '~/src';
+import Skeleton from 'react-loading-skeleton';
 
-export const columns: ColumnDef<V1Beta1Domain, any>[] = [
+export const getColumns: (
+  isLoading?: boolean
+) => ColumnDef<V1Beta1Domain, any>[] = isLoading => [
   {
     accessorKey: 'name',
     meta: {
       style: {
         paddingLeft: 0
       }
     },
-    cell: ({ row, getValue }) => {
-      return (
-        <Flex direction="column">
-          <Text>{row.original.name}</Text>
-        </Flex>
-      );
-    }
+    cell: isLoading
+      ? () => <Skeleton />
+      : ({ row, getValue }) => {
+          return (
+            <Flex direction="column">
+              <Text>{row.original.name}</Text>
+            </Flex>
+          );
+        }
   },
   {
     accessorKey: 'created_at',
-    cell: info => <Text>{info.getValue()}</Text>
+    cell: isLoading
+      ? () => <Skeleton />
+      : info => <Text>{info.getValue()}</Text>
   },
   {
     header: '',
@@ -34,9 +41,11 @@ export const columns: ColumnDef<V1Beta1Domain, any>[] = [
         textAlign: 'end'
       }
     },
-    cell: ({ row, getValue }) => (
-      <DomainActions domain={row.original as V1Beta1Domain} />
-    )
+    cell: isLoading
+      ? () => <Skeleton />
+      : ({ row, getValue }) => (
+          <DomainActions domain={row.original as V1Beta1Domain} />
+        )
   }
 ];
 

sdks/js/packages/core/react/components/organization/domain/index.tsx

@@ -2,24 +2,34 @@
 
 import { Button, DataTable, EmptyState, Flex, Text } from '@raystack/apsara';
 import { Outlet, useNavigate, useRouterState } from '@tanstack/react-router';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1Domain } from '~/src';
 import { styles } from '../styles';
-import { columns } from './domain.columns';
+import { getColumns } from './domain.columns';
 
 export default function Domain() {
   const { client, activeOrganization: organization } = useFrontier();
   const routerState = useRouterState();
   const [domains, setDomains] = useState([]);
+  const [isDomainsLoading, setIsDomainsLoading] = useState(false);
 
   const getDomains = useCallback(async () => {
-    if (!organization?.id) return;
-    const {
-      // @ts-ignore
-      data: { domains = [] }
-    } = await client?.frontierServiceListOrganizationDomains(organization?.id);
-    setDomains(domains);
+    try {
+      setIsDomainsLoading(true);
+      if (!organization?.id) return;
+      const {
+        // @ts-ignore
+        data: { domains = [] }
+      } = await client?.frontierServiceListOrganizationDomains(
+        organization?.id
+      );
+      setDomains(domains);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsDomainsLoading(false);
+    }
   }, [client, organization?.id]);
 
   useEffect(() => {
@@ -30,6 +40,16 @@ export default function Domain() {
     getDomains();
   }, [client, getDomains, organization?.id]);
 
+  const updatedDomains = useMemo(
+    () =>
+      isDomainsLoading
+        ? [{ id: 1 }, { id: 2 }, { id: 3 }]
+        : domains.length
+        ? domains
+        : [],
+    [isDomainsLoading, domains]
+  );
+
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex style={styles.header}>
@@ -38,7 +58,8 @@ export default function Domain() {
       <Flex direction="column" gap="large" style={styles.container}>
         <Flex direction="column" style={{ gap: '24px' }}>
           <AllowedEmailDomains />
-          <Domains domains={domains} />
+          {/* @ts-ignore */}
+          <Domains domains={updatedDomains} isLoading={isDomainsLoading} />
         </Flex>
       </Flex>
       <Outlet />
@@ -61,13 +82,20 @@ const AllowedEmailDomains = () => {
   );
 };
 
-const Domains = ({ domains }: { domains: V1Beta1Domain[] }) => {
+const Domains = ({
+  domains,
+  isLoading
+}: {
+  domains: V1Beta1Domain[];
+  isLoading?: boolean;
+}) => {
   let navigate = useNavigate({ from: '/domains' });
 
   const tableStyle = domains?.length
     ? { width: '100%' }
     : { width: '100%', height: '100%' };
 
+  const columns = useMemo(() => getColumns(isLoading), [isLoading]);
   return (
     <Flex direction="row">
       <DataTable

sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx

@@ -74,6 +74,7 @@ export const VerifyDomain = () => {
 
           <Image
             alt="cross"
+            style={{ cursor: 'pointer' }}
             // @ts-ignore
             src={cross}
             onClick={() => navigate({ to: '/domains' })}

sdks/js/packages/core/react/components/organization/general/delete.tsx

@@ -71,6 +71,7 @@ export const DeleteOrganization = () => {
           <Image
             className={styles.deleteIcon}
             alt="cross"
+            style={{ cursor: 'pointer' }}
             // @ts-ignore
             src={cross}
             onClick={() => navigate({ to: '/' })}

sdks/js/packages/core/react/components/organization/general/general.profile.tsx

@@ -1,27 +1,36 @@
 'use client';
 
 import { Avatar, Flex, Text } from '@raystack/apsara';
+import Skeleton from 'react-loading-skeleton';
 
 // @ts-ignore
 import { V1Beta1Organization } from '~/src';
 import { getInitials } from '~/utils';
-import styles from './general.module.css';
+// import styles from './general.module.css';
 
 interface GeneralProfileProps {
   organization?: V1Beta1Organization;
+  isLoading?: boolean;
 }
-export const GeneralProfile = ({ organization }: GeneralProfileProps) => {
+export const GeneralProfile = ({
+  organization,
+  isLoading
+}: GeneralProfileProps) => {
   return (
     <Flex direction="column" gap="small">
-      <Avatar
-        alt="Organization profile"
-        shape="circle"
-        fallback={getInitials(organization?.name)}
-        imageProps={{ width: '80px', height: '80px' }}
-      />
-      <Text size={4} className={styles.profileDescription}>
+      {isLoading ? (
+        <Skeleton style={{ width: '80px', height: '80px' }} circle />
+      ) : (
+        <Avatar
+          alt="Organization profile"
+          shape="circle"
+          fallback={getInitials(organization?.name)}
+          imageProps={{ width: '80px', height: '80px' }}
+        />
+      )}
+      {/* <Text size={4} className={styles.profileDescription}>
         Pick a logo for your organisation. Max size: 5 Mb
-      </Text>
+      </Text> */}
     </Flex>
   );
 };

sdks/js/packages/core/react/components/organization/general/general.workspace.tsx

@@ -9,6 +9,7 @@ import {
 } from '@raystack/apsara';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import Skeleton from 'react-loading-skeleton';
 import { toast } from 'sonner';
 import * as yup from 'yup';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -22,9 +23,11 @@ const generalSchema = yup
   .required();
 
 export const GeneralOrganization = ({
-  organization
+  organization,
+  isLoading
 }: {
   organization?: V1Beta1Organization;
+  isLoading?: boolean;
 }) => {
   const { client } = useFrontier();
   const {
@@ -60,19 +63,23 @@ export const GeneralOrganization = ({
       <Flex direction="column" gap="large" style={{ maxWidth: '320px' }}>
         <Box style={{ padding: 'var(--pd-4) 0' }}>
           <InputField label="Organization title">
-            <Controller
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  // @ts-ignore
-                  size="medium"
-                  placeholder="Provide organization title"
-                />
-              )}
-              defaultValue={organization?.title}
-              control={control}
-              name="title"
-            />
+            {isLoading ? (
+              <Skeleton height={'32px'} />
+            ) : (
+              <Controller
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    // @ts-ignore
+                    size="medium"
+                    placeholder="Provide organization title"
+                  />
+                )}
+                defaultValue={organization?.title}
+                control={control}
+                name="title"
+              />
+            )}
 
             <Text size={1} style={{ color: 'var(--foreground-danger)' }}>
               {errors.title && String(errors.title?.message)}
@@ -81,19 +88,23 @@ export const GeneralOrganization = ({
         </Box>
         <Box style={{ padding: 'var(--pd-4) 0' }}>
           <InputField label="Organization name">
-            <Controller
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  // @ts-ignore
-                  size="medium"
-                  placeholder="Provide organization name"
-                />
-              )}
-              defaultValue={organization?.name}
-              control={control}
-              name="name"
-            />
+            {isLoading ? (
+              <Skeleton height={'32px'} />
+            ) : (
+              <Controller
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    // @ts-ignore
+                    size="medium"
+                    placeholder="Provide organization name"
+                  />
+                )}
+                defaultValue={organization?.name}
+                control={control}
+                name="name"
+              />
+            )}
 
             <Text size={1} style={{ color: 'var(--foreground-danger)' }}>
               {errors.name && String(errors.name?.message)}
@@ -105,6 +116,7 @@ export const GeneralOrganization = ({
           variant="primary"
           type="submit"
           style={{ width: 'fit-content' }}
+          disabled={isLoading || isSubmitting}
         >
           {isSubmitting ? 'updating...' : 'Update'}
         </Button>

sdks/js/packages/core/react/components/organization/general/index.tsx

@@ -8,25 +8,35 @@ import { GeneralProfile } from './general.profile';
 import { GeneralOrganization } from './general.workspace';
 
 export default function GeneralSetting() {
-  const { activeOrganization: organization } = useFrontier();
+  const {
+    activeOrganization: organization,
+    isActiveOrganizationLoading: isLoading
+  } = useFrontier();
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex style={styles.header}>
         <Text size={6}>General</Text>
       </Flex>
       <Flex direction="column" gap="large" style={styles.container}>
-        <GeneralProfile organization={organization} />
+        <GeneralProfile organization={organization} isLoading={isLoading} />
         <Separator />
-        <GeneralOrganization organization={organization} />
+        <GeneralOrganization
+          organization={organization}
+          isLoading={isLoading}
+        />
         <Separator />
-        <GeneralDeleteOrganization />
+        <GeneralDeleteOrganization isLoading={isLoading} />
         <Separator />
       </Flex>
     </Flex>
   );
 }
 
-export const GeneralDeleteOrganization = () => {
+export const GeneralDeleteOrganization = ({
+  isLoading
+}: {
+  isLoading?: boolean;
+}) => {
   const navigate = useNavigate({ from: '/' });
   return (
     <Flex direction="column" gap="medium">
@@ -39,6 +49,7 @@ export const GeneralDeleteOrganization = () => {
         type="submit"
         size="medium"
         onClick={() => navigate({ to: '/delete' })}
+        disabled={isLoading}
       >
         Delete organization
       </Button>