Update loading UI

package.json

@@ -34,9 +34,9 @@
     "ip": "^2.0.1",
     "lerna": "^8.1.2",
     "lint-staged": "^15.2.2",
-    "npm-check-updates": "^16.14.18"
+    "npm-check-updates": "^16.14.20"
   },
   "resolutions": {
-    "follow-redirects": "^1.15.6"
+    "tar": "^6.2.1"
   }
 }

packages/app/package.json

@@ -30,33 +30,33 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/app-elements": "1.20.1",
-    "@commercelayer/sdk": "5.36.0",
+    "@commercelayer/app-elements": "1.24.0",
+    "@commercelayer/sdk": "5.37.0",
     "@hookform/resolvers": "^3.3.4",
     "lodash": "^4.17.21",
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.51.3",
     "swr": "^2.2.5",
-    "type-fest": "^4.15.0",
-    "wouter": "^3.1.0",
-    "zod": "^3.22.4"
+    "type-fest": "^4.18.1",
+    "wouter": "^3.1.2",
+    "zod": "^3.23.5"
   },
   "devDependencies": {
     "@commercelayer/eslint-config-ts-react": "^1.4.5",
     "@types/lodash": "^4.17.0",
-    "@types/node": "20.12.4",
+    "@types/node": "20.12.8",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "jsdom": "^24.0.0",
-    "rollup-plugin-external-globals": "^0.9.2",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.8",
+    "rollup-plugin-external-globals": "^0.10.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.4.0"
+    "vitest": "^1.5.3"
   },
   "engines": {
     "node": ">=18"

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 () => {

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>
+    )
+  }
+)

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>
+    )
+  }
+)

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>
   )
-}
+})

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>
+    )
+  })

packages/app/src/data/events.ts

@@ -77,7 +77,8 @@ export const webhookEvents: Record<ResourceWithEvent, string[]> = {
     'deactivate',
     'cancel',
     'last_run_failed',
-    'last_run_succeeded'
+    'last_run_succeeded',
+    'renewal'
   ],
   parcels: [
     'create',

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'

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