fix: update loading ui to use SkeletonTemplate instead of PageSkeleton

commercelayer · May 2, 2024 · 14ca3eb · 14ca3eb
1 parent fed68b7
commit 14ca3eb
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 200 deletions.
diff --git a/packages/app/src/components/Form/Provider.tsx b/packages/app/src/components/Form/Provider.tsx
@@ -1,4 +1,4 @@
-import type { CommerceLayerClient } from '@commercelayer/sdk'
+import { useCoreSdkProvider } from '@commercelayer/app-elements'
 import type { WebhookFormContextValue } from 'App'
 import {
   createContext,
@@ -12,7 +12,6 @@ import { reducer } from './reducer'
 
 interface WebhookFormProviderProps {
   webhookId: string
-  sdkClient: CommerceLayerClient
   children:
     | ((props: WebhookFormContextValue) => React.ReactNode)
     | React.ReactNode
@@ -23,10 +22,10 @@ export const useWebhookFormContext = (): WebhookFormContextValue =>
   useContext(Context)
 
 export function WebhookFormProvider({
-  sdkClient,
   webhookId,
   children
 }: WebhookFormProviderProps): JSX.Element {
+  const { sdkClient } = useCoreSdkProvider()
   const [state, dispatch] = useReducer(reducer, initialState)
 
   const fetchJob = useCallback(async () => {

diff --git a/packages/app/src/components/WebhookCallback.tsx b/packages/app/src/components/WebhookCallback.tsx
@@ -1,43 +1,49 @@
-import { InputReadonly, Section, Spacer } from '@commercelayer/app-elements'
+import {
+  InputReadonly,
+  Section,
+  Spacer,
+  withSkeletonTemplate
+} from '@commercelayer/app-elements'
 import type { Webhook } from '@commercelayer/sdk'
-import type { FC } from 'react'
 
 interface WebhookCallbackProps {
   webhook: Webhook
 }
 
-export const WebhookCallback: FC<WebhookCallbackProps> = ({ webhook }) => {
-  return (
-    <Section title='Callback'>
-      <Spacer top='6' bottom='10'>
-        <InputReadonly
-          label='Callback URL'
-          value={webhook.callback_url}
-          showCopyAction
-        />
-      </Spacer>
-      <Spacer bottom='12'>
-        <InputReadonly
-          label='Shared secret'
-          value={webhook.shared_secret}
-          showCopyAction
-          hint={{
-            text: (
-              <>
-                Used to verify the{' '}
-                <a
-                  href='https://docs.commercelayer.io/core/callbacks-security'
-                  target='_blank'
-                  rel='noreferrer'
-                >
-                  callback authenticity
-                </a>
-                .
-              </>
-            )
-          }}
-        />
-      </Spacer>
-    </Section>
-  )
-}
+export const WebhookCallback = withSkeletonTemplate<WebhookCallbackProps>(
+  ({ webhook }) => {
+    return (
+      <Section title='Callback'>
+        <Spacer top='6' bottom='10'>
+          <InputReadonly
+            label='Callback URL'
+            value={webhook.callback_url}
+            showCopyAction
+          />
+        </Spacer>
+        <Spacer bottom='12'>
+          <InputReadonly
+            label='Shared secret'
+            value={webhook.shared_secret}
+            showCopyAction
+            hint={{
+              text: (
+                <>
+                  Used to verify the{' '}
+                  <a
+                    href='https://docs.commercelayer.io/core/callbacks-security'
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    callback authenticity
+                  </a>
+                  .
+                </>
+              )
+            }}
+          />
+        </Spacer>
+      </Section>
+    )
+  }
+)
diff --git a/packages/app/src/components/WebhookInfos.tsx b/packages/app/src/components/WebhookInfos.tsx
@@ -1,27 +1,33 @@
-import { ListItem, Section, Text } from '@commercelayer/app-elements'
+import {
+  ListItem,
+  Section,
+  Text,
+  withSkeletonTemplate
+} from '@commercelayer/app-elements'
 import type { Webhook } from '@commercelayer/sdk'
-import type { FC } from 'react'
 
 interface WebhookInfosProps {
   webhook: Webhook
 }
 
-export const WebhookInfos: FC<WebhookInfosProps> = ({ webhook }) => {
-  return (
-    <Section title='Info'>
-      {webhook.topic != null ? (
-        <ListItem padding='y'>
-          <Text variant='info'>Topic</Text>
-          <Text weight='bold'>{webhook.topic}</Text>
-        </ListItem>
-      ) : null}
-      {webhook.include_resources != null &&
-      webhook.include_resources.length > 0 ? (
-        <ListItem padding='y'>
-          <Text variant='info'>Includes</Text>
-          <Text weight='bold'>{webhook.include_resources.join(', ')}</Text>
-        </ListItem>
-      ) : null}
-    </Section>
-  )
-}
+export const WebhookInfos = withSkeletonTemplate<WebhookInfosProps>(
+  ({ webhook }) => {
+    return (
+      <Section title='Info'>
+        {webhook.topic != null ? (
+          <ListItem padding='y'>
+            <Text variant='info'>Topic</Text>
+            <Text weight='bold'>{webhook.topic}</Text>
+          </ListItem>
+        ) : null}
+        {webhook.include_resources != null &&
+        webhook.include_resources.length > 0 ? (
+          <ListItem padding='y'>
+            <Text variant='info'>Includes</Text>
+            <Text weight='bold'>{webhook.include_resources.join(', ')}</Text>
+          </ListItem>
+        ) : null}
+      </Section>
+    )
+  }
+)
diff --git a/packages/app/src/components/WebhookTopCard.tsx b/packages/app/src/components/WebhookTopCard.tsx
@@ -11,14 +11,15 @@ import {
   ListDetails,
   Spacer,
   Text,
-  useTokenProvider
+  useTokenProvider,
+  withSkeletonTemplate
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
 import { useRoute } from 'wouter'
 import { WebhookCircuit } from './WebhookCircuit'
 import { WebhookTriggerActionButton } from './WebhookTriggerActionButton'
 
-export const WebhookTopCard: FC = () => {
+export const WebhookTopCard: FC = withSkeletonTemplate(() => {
   const { canUser, user } = useTokenProvider()
   const [, params] = useRoute(appRoutes.details.path)
   const webhookId = params?.webhookId ?? ''
@@ -76,4 +77,4 @@ export const WebhookTopCard: FC = () => {
       </Spacer>
     </ListDetails>
   )
-}
+})
diff --git a/packages/app/src/components/WebhookTriggerActionButton.tsx b/packages/app/src/components/WebhookTriggerActionButton.tsx
@@ -3,35 +3,32 @@ import {
   getWebhookTriggerActionName
 } from '#data/dictionaries'
 import { useTriggerAttribute } from '#hooks/useTriggerAttribute'
-import { Button } from '@commercelayer/app-elements'
+import { Button, withSkeletonTemplate } from '@commercelayer/app-elements'
 import type { Webhook } from '@commercelayer/sdk'
 
-import type { FC } from 'react'
-
 interface WebhookTriggerActionButtonProps {
   webhook: Webhook
 }
 
-export const WebhookTriggerActionButton: FC<
-  WebhookTriggerActionButtonProps
-> = ({ webhook }) => {
-  const triggerAction = getWebhookTriggerAction(webhook)
-  const label = getWebhookTriggerActionName(triggerAction.triggerAttribute)
-  const { isLoading, dispatch } = useTriggerAttribute(webhook.id)
+export const WebhookTriggerActionButton =
+  withSkeletonTemplate<WebhookTriggerActionButtonProps>(({ webhook }) => {
+    const triggerAction = getWebhookTriggerAction(webhook)
+    const label = getWebhookTriggerActionName(triggerAction.triggerAttribute)
+    const { isLoading, dispatch } = useTriggerAttribute(webhook.id)
 
-  return (
-    <Button
-      disabled={isLoading}
-      size='small'
-      variant='primary'
-      onClick={() => {
-        void dispatch(triggerAction.triggerAttribute)
-      }}
-      style={{
-        alignSelf: 'baseline'
-      }}
-    >
-      {label}
-    </Button>
-  )
-}
+    return (
+      <Button
+        disabled={isLoading}
+        size='small'
+        variant='primary'
+        onClick={() => {
+          void dispatch(triggerAction.triggerAttribute)
+        }}
+        style={{
+          alignSelf: 'baseline'
+        }}
+      >
+        {label}
+      </Button>
+    )
+  })
diff --git a/packages/app/src/pages/EventCallbacksList.tsx b/packages/app/src/pages/EventCallbacksList.tsx
@@ -4,17 +4,14 @@ import {
   Button,
   EmptyState,
   PageLayout,
-  PageSkeleton,
   ResourceList,
-  useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
 import { Link, useLocation, useRoute } from 'wouter'
 
 export const EventCallbacksList: FC = () => {
   const { settings, canUser } = useTokenProvider()
-  const { sdkClient } = useCoreSdkProvider()
   const [, setLocation] = useLocation()
   const [, params] = useRoute(appRoutes.webhookEventCallbacks.path)
 
@@ -49,10 +46,6 @@ export const EventCallbacksList: FC = () => {
     )
   }
 
-  if (sdkClient == null) {
-    return <PageSkeleton />
-  }
-
   return (
     <PageLayout
       title='Event Callbacks'

diff --git a/packages/app/src/pages/WebhookCreate.tsx b/packages/app/src/pages/WebhookCreate.tsx
@@ -4,22 +4,15 @@ import {
   Button,
   EmptyState,
   PageLayout,
-  PageSkeleton,
-  useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
 import { Link, useLocation } from 'wouter'
 
 export const WebhookCreate: FC = () => {
   const { settings, canUser } = useTokenProvider()
-  const { sdkClient } = useCoreSdkProvider()
   const [, setLocation] = useLocation()
 
-  if (sdkClient == null) {
-    return <PageSkeleton hasHeaderDescription />
-  }
-
   if (!canUser('create', 'webhooks')) {
     return (
       <PageLayout