Global loaders

getlago · Oct 10, 2024 · 09457da · 09457da
1 parent 355cbed
commit 09457da
Show file tree

Hide file tree

Showing 13 changed files with 277 additions and 228 deletions.
diff --git a/src/components/customerPortal/PortalCustomerInfos.tsx b/src/components/customerPortal/PortalCustomerInfos.tsx
@@ -2,7 +2,7 @@ import { gql } from '@apollo/client'
 
 import SectionContainer from '~/components/customerPortal/common/SectionContainer'
 import SectionError from '~/components/customerPortal/common/SectionError'
-import SectionLoading from '~/components/customerPortal/common/SectionLoading'
+import { LoaderCustomerInformationSection } from '~/components/customerPortal/common/SectionLoading'
 import SectionTitle from '~/components/customerPortal/common/SectionTitle'
 import { TRANSLATIONS_MAP_CUSTOMER_TYPE } from '~/components/customers/utils'
 import { CountryCodes } from '~/core/constants/countryCodes'
@@ -186,7 +186,7 @@ const PortalCustomerInfos = ({ viewEditInformation }: PortalCustomerInfosProps)
         loading={isLoading}
       />
 
-      {isLoading && <SectionLoading variant="customer-information-section" />}
+      {isLoading && <LoaderCustomerInformationSection />}
 
       {!isLoading && (
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-8">

diff --git a/src/components/customerPortal/PortalInvoicesList.tsx b/src/components/customerPortal/PortalInvoicesList.tsx
@@ -4,7 +4,7 @@ import { useEffect } from 'react'
 
 import SectionContainer from '~/components/customerPortal/common/SectionContainer'
 import SectionError from '~/components/customerPortal/common/SectionError'
-import SectionLoading from '~/components/customerPortal/common/SectionLoading'
+import { LoaderInvoicesListTotal } from '~/components/customerPortal/common/SectionLoading'
 import SectionTitle from '~/components/customerPortal/common/SectionTitle'
 import {
   Button,
@@ -257,7 +257,7 @@ const PortalInvoicesList = ({ translate, documentLocale }: PortalCustomerInvoice
 
       <div className="grid grid-cols-2 gap-8">
         <div className="flex flex-col gap-1">
-          {invoicesLoading && <SectionLoading variant="invoices-list-total" />}
+          {invoicesLoading && <LoaderInvoicesListTotal />}
 
           {!invoicesLoading && !invoicesError && (
             <>
@@ -277,7 +277,7 @@ const PortalInvoicesList = ({ translate, documentLocale }: PortalCustomerInvoice
         </div>
 
         <div className="flex flex-col gap-1">
-          {overdueLoading && <SectionLoading variant="invoices-list-total" />}
+          {overdueLoading && <LoaderInvoicesListTotal />}
 
           {!overdueLoading && !overdueError && (
             <>

diff --git a/src/components/customerPortal/common/CustomerPortalSidebar.tsx b/src/components/customerPortal/common/CustomerPortalSidebar.tsx
@@ -1,32 +1,47 @@
+import { ApolloError } from '@apollo/client'
 import styled from 'styled-components'
 
+import { LoaderSidebarOrganization } from '~/components/customerPortal/common/SectionLoading'
 import { Typography } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import Logo from '~/public/images/logo/lago-logo-grey.svg'
 import { theme } from '~/styles'
 
+type CustomerPortalSidebarProps = {
+  organizationName?: string | null
+  organizationLogoUrl?: string | null
+  isLoading?: boolean
+  isError?: ApolloError
+}
+
 const CustomerPortalSidebar = ({
   organizationName,
   organizationLogoUrl,
-}: {
-  organizationName?: string | null
-  organizationLogoUrl?: string | null
-}) => {
+  isLoading,
+}: CustomerPortalSidebarProps) => {
   const { translate } = useInternationalization()
 
   return (
     <>
       <div className="hidden h-screen w-[400px] shrink-0 flex-col gap-8 bg-grey-100 p-16 md:flex">
         <div className="flex items-center">
-          {!!organizationLogoUrl && (
+          {isLoading && (
+            <div className="w-full">
+              <LoaderSidebarOrganization />
+            </div>
+          )}
+
+          {!isLoading && !!organizationLogoUrl && (
             <OrgaLogoContainer>
               <img src={organizationLogoUrl} alt={`${organizationName}'s logo`} />
             </OrgaLogoContainer>
           )}
           <Typography variant="headline">{organizationName}</Typography>
         </div>
 
-        <h3 className="text-lg font-semibold text-black">Manage your plans & billing</h3>
+        {!isLoading && (
+          <h3 className="text-lg font-semibold text-black">Manage your plans & billing</h3>
+        )}
 
         <div className="flex items-center gap-1">
           <span className="text-xs font-normal text-grey-600">

diff --git a/src/components/customerPortal/common/SectionError.tsx b/src/components/customerPortal/common/SectionError.tsx
@@ -3,9 +3,17 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 
 type SectionErrorProps = {
   refresh?: () => void
+  customTitle?: string
+  customDescription?: string
+  hideDescription?: boolean
 }
 
-const SectionError = ({ refresh }: SectionErrorProps) => {
+const SectionError = ({
+  customTitle,
+  customDescription,
+  hideDescription,
+  refresh,
+}: SectionErrorProps) => {
   const { translate } = useInternationalization()
 
   return (
@@ -16,12 +24,14 @@ const SectionError = ({ refresh }: SectionErrorProps) => {
 
       <div>
         <h3 className="mb-3 text-lg font-semibold leading-6 text-grey-700">
-          {translate('text_1728385052917x4pkr4t3x3b')}
+          {customTitle || translate('text_1728385052917x4pkr4t3x3b')}
         </h3>
 
-        <p className="text-base font-normal leading-6 text-grey-600">
-          {translate('text_1728385052918teqr4dhxxi6')}
-        </p>
+        {!hideDescription && (
+          <p className="text-base font-normal leading-6 text-grey-600">
+            {customDescription || translate('text_1728385052918teqr4dhxxi6')}
+          </p>
+        )}
       </div>
 
       {refresh && <Button onClick={refresh}>{translate('text_1728385052918zkczgwzq967')}</Button>}

diff --git a/src/components/customerPortal/common/SectionLoading.tsx b/src/components/customerPortal/common/SectionLoading.tsx
@@ -1,17 +1,6 @@
 import SectionTitle from '~/components/customerPortal/common/SectionTitle'
 import { Skeleton } from '~/components/designSystem/Skeleton'
 
-type SectionLoadingProps = {
-  variant?:
-    | 'customer-information-page'
-    | 'customer-information-section'
-    | 'wallet-page'
-    | 'wallet-section'
-    | 'usage-section'
-    | 'usage-subscription-item'
-    | 'invoices-list-total'
-}
-
 const group = (
   <div className="mb-12">
     <SectionTitle title="" loading={true} />
@@ -30,119 +19,112 @@ const group = (
   </div>
 )
 
-const SectionLoading = ({ variant }: SectionLoadingProps) => {
-  if (variant === 'usage-section') {
-    return (
-      <div className="grid grid-cols-2">
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={160} />
-          <Skeleton variant="text" height={12} width={240} />
-          <Skeleton variant="text" height={12} width={72} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={160} />
-          <Skeleton variant="text" height={12} width={240} />
-          <Skeleton variant="text" height={12} width={72} />
-        </div>
-      </div>
-    )
-  }
+export const LoaderUsageSection = () => (
+  <div className="grid grid-cols-2">
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={160} />
+      <Skeleton variant="text" height={12} width={240} />
+      <Skeleton variant="text" height={12} width={72} />
+    </div>
 
-  if (variant === 'usage-subscription-item') {
-    return (
-      <div className="flex flex-col gap-3">
-        <Skeleton variant="text" height={12} width={72} />
-        <Skeleton variant="text" height={12} width={160} />
-        <Skeleton variant="text" height={12} width={240} />
-        <Skeleton variant="text" height={12} width={72} />
-      </div>
-    )
-  }
-
-  if (variant === 'wallet-page') {
-    return (
-      <div className="mt-8 flex flex-col gap-4">
-        {group}
-        {group}
-        {group}
-      </div>
-    )
-  }
-
-  if (variant === 'wallet-section') {
-    return (
-      <div className="grid grid-cols-2">
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={160} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={160} />
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'customer-information-section') {
-    return (
-      <div className="grid grid-cols-2 gap-6">
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={240} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={240} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={240} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={240} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={240} />
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <Skeleton variant="text" height={12} width={72} />
-          <Skeleton variant="text" height={12} width={240} />
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'customer-information-page') {
-    return (
-      <div className="mt-8 flex flex-col gap-4">
-        {group}
-        {group}
-        {group}
-      </div>
-    )
-  }
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={160} />
+      <Skeleton variant="text" height={12} width={240} />
+      <Skeleton variant="text" height={12} width={72} />
+    </div>
+  </div>
+)
 
-  if (variant === 'invoices-list-total') {
-    return (
-      <div className="flex flex-col gap-3">
-        <Skeleton variant="text" height={12} width={72} />
-        <Skeleton variant="text" height={12} width={240} />
-      </div>
-    )
-  }
+export const LoaderUsageSubscriptionItem = () => (
+  <div className="flex flex-col gap-3">
+    <Skeleton variant="text" height={12} width={72} />
+    <Skeleton variant="text" height={12} width={160} />
+    <Skeleton variant="text" height={12} width={240} />
+    <Skeleton variant="text" height={12} width={72} />
+  </div>
+)
+
+export const LoaderWalletPage = () => (
+  <div className="mt-8 flex flex-col gap-4">
+    {group}
+    {group}
+    {group}
+  </div>
+)
+
+export const LoaderWalletSection = () => (
+  <div className="grid grid-cols-2">
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={160} />
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={160} />
+    </div>
+  </div>
+)
+
+export const LoaderCustomerInformationSection = () => (
+  <div className="grid grid-cols-2 gap-6">
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={240} />
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={240} />
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={240} />
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={240} />
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={240} />
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <Skeleton variant="text" height={12} width={72} />
+      <Skeleton variant="text" height={12} width={240} />
+    </div>
+  </div>
+)
+
+export const LoaderCustomerInformationPage = () => (
+  <div className="mt-8 flex flex-col gap-4">
+    {group}
+    {group}
+    {group}
+  </div>
+)
+
+export const LoaderInvoicesListTotal = () => (
+  <div className="flex flex-col gap-3">
+    <Skeleton variant="text" height={12} width={72} />
+    <Skeleton variant="text" height={12} width={240} />
+  </div>
+)
+
+export const LoaderSidebarOrganization = () => (
+  <div className="flex flex-col gap-8">
+    <Skeleton className="!rounded-[8px] bg-grey-200" variant="text" height={32} width={32} />
+    <Skeleton className="bg-grey-200" variant="text" height={12} width={228} />
+  </div>
+)
 
+export const SectionLoading = () => {
   return (
     <div className="flex flex-col gap-2">
       <Skeleton variant="text" height={12} width={120} />

diff --git a/src/components/customerPortal/customerInformation/CustomerInformationPage.tsx b/src/components/customerPortal/customerInformation/CustomerInformationPage.tsx
@@ -5,7 +5,7 @@ import { object, string } from 'yup'
 
 import PageTitle from '~/components/customerPortal/common/PageTitle'
 import SectionError from '~/components/customerPortal/common/SectionError'
-import SectionLoading from '~/components/customerPortal/common/SectionLoading'
+import { LoaderCustomerInformationPage } from '~/components/customerPortal/common/SectionLoading'
 import { TRANSLATIONS_MAP_CUSTOMER_TYPE } from '~/components/customers/utils'
 import { Alert, Button } from '~/components/designSystem'
 import { Checkbox, ComboBoxField, TextInputField } from '~/components/form'
@@ -320,7 +320,7 @@ const CustomerInformationPage = ({ goHome }: CustomerInformationPageProps) => {
     <div>
       <PageTitle title={translate('text_1728377307159nbrs3pgng03')} goHome={goHome} />
 
-      {isLoading && <SectionLoading variant="customer-information-page" />}
+      {isLoading && <LoaderCustomerInformationPage />}
 
       {!isLoading && <EditCustomerBillingForm customer={customerPortalUser} onSuccess={goHome} />}
     </div>