From 14ca3eb18c4bd642fdb9347f3cb019960ef757e0 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Thu, 2 May 2024 16:29:29 +0200
Subject: [PATCH] fix: update loading ui to use SkeletonTemplate instead of
 PageSkeleton

---
 packages/app/src/components/Form/Provider.tsx |  5 +-
 .../app/src/components/WebhookCallback.tsx    | 80 ++++++++++--------
 packages/app/src/components/WebhookInfos.tsx  | 48 ++++++-----
 .../app/src/components/WebhookTopCard.tsx     |  7 +-
 .../components/WebhookTriggerActionButton.tsx | 47 +++++------
 packages/app/src/pages/EventCallbacksList.tsx |  7 --
 packages/app/src/pages/WebhookCreate.tsx      |  7 --
 packages/app/src/pages/WebhookDelete.tsx      | 84 +++++++++----------
 packages/app/src/pages/WebhookDetails.tsx     | 54 ++++++------
 packages/app/src/pages/WebhookEdit.tsx        | 44 +++++-----
 10 files changed, 183 insertions(+), 200 deletions(-)

diff --git a/packages/app/src/components/Form/Provider.tsx b/packages/app/src/components/Form/Provider.tsx
index 03369fd..224e299 100644
--- 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
index b0eeb5a..e2475e4 100644
--- 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
index e0a57c0..e215a08 100644
--- 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
index 5b07298..637c689 100644
--- 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
index c490373..491586d 100644
--- 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
index 9264224..bd193d4 100644
--- a/packages/app/src/pages/EventCallbacksList.tsx
+++ b/packages/app/src/pages/EventCallbacksList.tsx
@@ -4,9 +4,7 @@ import {
   Button,
   EmptyState,
   PageLayout,
-  PageSkeleton,
   ResourceList,
-  useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
@@ -14,7 +12,6 @@ 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
index 587f371..90352c1 100644
--- a/packages/app/src/pages/WebhookCreate.tsx
+++ b/packages/app/src/pages/WebhookCreate.tsx
@@ -4,8 +4,6 @@ import {
   Button,
   EmptyState,
   PageLayout,
-  PageSkeleton,
-  useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
@@ -13,13 +11,8 @@ 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
diff --git a/packages/app/src/pages/WebhookDelete.tsx b/packages/app/src/pages/WebhookDelete.tsx
index bcf817e..d677d61 100644
--- a/packages/app/src/pages/WebhookDelete.tsx
+++ b/packages/app/src/pages/WebhookDelete.tsx
@@ -6,7 +6,7 @@ import {
   EmptyState,
   ListDetails,
   PageLayout,
-  PageSkeleton,
+  SkeletonTemplate,
   Spacer,
   Text,
   useCoreSdkProvider,
@@ -59,48 +59,48 @@ export const WebhookDelete: FC = () => {
     )
   }
 
-  return isLoading ? (
-    <PageSkeleton layout='details' hasHeaderDescription />
-  ) : webhook == null ? (
+  return webhook == null ? (
     <ErrorNotFound />
   ) : (
-    <PageLayout
-      title={`Permanently delete the ${webhook.name} webhook.`}
-      mode={settings.mode}
-      navigationButton={{
-        onClick: () => {
-          setLocation(appRoutes.details.makePath({ webhookId }))
-        },
-        label: `Cancel`,
-        icon: 'x'
-      }}
-      gap='only-top'
-      overlay
-    >
-      <ListDetails>
-        <Spacer bottom='12'>
-          <Text variant='info' weight='medium'>
-            This action cannot be undone, proceed with caution.
-          </Text>
-        </Spacer>
-        <Button
-          variant='danger'
-          size='small'
-          onClick={(e) => {
-            e.stopPropagation()
-            deleteWebhook()
-              .then(() => {
-                setLocation(appRoutes.list.makePath({}))
-              })
-              .catch((e: any) => {
-                console.log(e)
-              })
-          }}
-          fullWidth
-        >
-          Delete webhook
-        </Button>
-      </ListDetails>
-    </PageLayout>
+    <SkeletonTemplate isLoading={isLoading}>
+      <PageLayout
+        title={`Permanently delete the ${webhook.name} webhook.`}
+        mode={settings.mode}
+        navigationButton={{
+          onClick: () => {
+            setLocation(appRoutes.details.makePath({ webhookId }))
+          },
+          label: `Cancel`,
+          icon: 'x'
+        }}
+        gap='only-top'
+        overlay
+      >
+        <ListDetails>
+          <Spacer bottom='12'>
+            <Text variant='info' weight='medium'>
+              This action cannot be undone, proceed with caution.
+            </Text>
+          </Spacer>
+          <Button
+            variant='danger'
+            size='small'
+            onClick={(e) => {
+              e.stopPropagation()
+              deleteWebhook()
+                .then(() => {
+                  setLocation(appRoutes.list.makePath({}))
+                })
+                .catch((e: any) => {
+                  console.log(e)
+                })
+            }}
+            fullWidth
+          >
+            Delete webhook
+          </Button>
+        </ListDetails>
+      </PageLayout>
+    </SkeletonTemplate>
   )
 }
diff --git a/packages/app/src/pages/WebhookDetails.tsx b/packages/app/src/pages/WebhookDetails.tsx
index 34667d9..1a8f69a 100644
--- a/packages/app/src/pages/WebhookDetails.tsx
+++ b/packages/app/src/pages/WebhookDetails.tsx
@@ -12,9 +12,8 @@ import {
   EmptyState,
   Icon,
   PageLayout,
-  PageSkeleton,
+  SkeletonTemplate,
   Spacer,
-  useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
@@ -22,7 +21,6 @@ import { Link, useLocation, useRoute } from 'wouter'
 
 export const WebhookDetails: FC = () => {
   const { settings, canUser } = useTokenProvider()
-  const { sdkClient } = useCoreSdkProvider()
   const [, params] = useRoute(appRoutes.details.path)
   const [, setLocation] = useLocation()
 
@@ -54,10 +52,6 @@ export const WebhookDetails: FC = () => {
     )
   }
 
-  if (sdkClient == null) {
-    return <PageSkeleton layout='details' hasHeaderDescription />
-  }
-
   const contextMenuEdit = canUser('update', 'webhooks') && (
     <DropdownItem
       label='Edit'
@@ -96,30 +90,30 @@ export const WebhookDetails: FC = () => {
     />
   )
 
-  return isLoading ? (
-    <PageSkeleton layout='details' hasHeaderDescription />
-  ) : webhook == null ? (
+  return webhook == null ? (
     <ErrorNotFound />
   ) : (
-    <PageLayout
-      title={webhook.name}
-      mode={settings.mode}
-      navigationButton={{
-        onClick: () => {
-          setLocation(appRoutes.list.makePath({}))
-        },
-        label: `Webhooks`,
-        icon: 'arrowLeft'
-      }}
-      actionButton={contextMenu}
-    >
-      <Spacer bottom='12'>
-        <WebhookTopCard />
-      </Spacer>
-      <Spacer bottom='12'>
-        <WebhookInfos webhook={webhook} />
-      </Spacer>
-      <WebhookCallback webhook={webhook} />
-    </PageLayout>
+    <SkeletonTemplate isLoading={isLoading}>
+      <PageLayout
+        title={webhook.name}
+        mode={settings.mode}
+        navigationButton={{
+          onClick: () => {
+            setLocation(appRoutes.list.makePath({}))
+          },
+          label: `Webhooks`,
+          icon: 'arrowLeft'
+        }}
+        actionButton={contextMenu}
+      >
+        <Spacer bottom='12'>
+          <WebhookTopCard />
+        </Spacer>
+        <Spacer bottom='12'>
+          <WebhookInfos webhook={webhook} />
+        </Spacer>
+        <WebhookCallback webhook={webhook} />
+      </PageLayout>
+    </SkeletonTemplate>
   )
 }
diff --git a/packages/app/src/pages/WebhookEdit.tsx b/packages/app/src/pages/WebhookEdit.tsx
index 43207d2..c7ab215 100644
--- a/packages/app/src/pages/WebhookEdit.tsx
+++ b/packages/app/src/pages/WebhookEdit.tsx
@@ -6,8 +6,7 @@ import {
   Button,
   EmptyState,
   PageLayout,
-  PageSkeleton,
-  useCoreSdkProvider,
+  SkeletonTemplate,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
@@ -15,7 +14,6 @@ import { Link, useLocation, useRoute } from 'wouter'
 
 export const WebhookEdit: FC = () => {
   const { settings, canUser } = useTokenProvider()
-  const { sdkClient } = useCoreSdkProvider()
   const [, params] = useRoute(appRoutes.editWebhook.path)
   const [, setLocation] = useLocation()
 
@@ -46,32 +44,28 @@ export const WebhookEdit: FC = () => {
     )
   }
 
-  if (sdkClient == null) {
-    return <PageSkeleton hasHeaderDescription />
-  }
-
   return (
-    <WebhookFormProvider sdkClient={sdkClient} webhookId={webhookId}>
+    <WebhookFormProvider webhookId={webhookId}>
       {({ state: { isLoading, data } }) =>
-        isLoading ? (
-          <PageSkeleton layout='details' hasHeaderDescription />
-        ) : data == null ? (
+        isLoading ? null : data == null ? (
           <ErrorNotFound />
         ) : (
-          <PageLayout
-            title='Edit webhook'
-            mode={settings.mode}
-            navigationButton={{
-              onClick: () => {
-                setLocation(appRoutes.list.makePath({ webhookId }))
-              },
-              label: 'Cancel',
-              icon: 'x'
-            }}
-            overlay
-          >
-            <WebhookForm webhookData={data} />
-          </PageLayout>
+          <SkeletonTemplate>
+            <PageLayout
+              title='Edit webhook'
+              mode={settings.mode}
+              navigationButton={{
+                onClick: () => {
+                  setLocation(appRoutes.list.makePath({ webhookId }))
+                },
+                label: 'Cancel',
+                icon: 'x'
+              }}
+              overlay
+            >
+              <WebhookForm webhookData={data} />
+            </PageLayout>
+          </SkeletonTemplate>
         )
       }
     </WebhookFormProvider>