@licklist/design 0.71.6-dev.5 → 0.71.6-dev.7

package/src/static/loader/LoaderIndicator.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable react/jsx-pascal-case */
-import { ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 import * as ReactLoader from 'react-loader'
 import ILoaderOptions from '../../types/static/ILoaderOptions'
 
 export interface LoaderIndicatorProps {
-  children?: ReactNode | ReactNode[]
   isLoaded?: boolean
   options?: ILoaderOptions
   className?: string
 }
 
-export function LoaderIndicator(props: LoaderIndicatorProps) {
+export function LoaderIndicator(
+  props: PropsWithChildren<LoaderIndicatorProps>,
+) {
   const { children, isLoaded, options, className = '' } = props
 
   const defaultOptions: ILoaderOptions = {
@@ -37,6 +38,8 @@ export function LoaderIndicator(props: LoaderIndicatorProps) {
   } as ILoaderOptions
 
   return (
+    // TODO Remove this library, it's deprecated and even removed from npm packages
+    // @ts-expect-error
     <ReactLoader.default
       loaded={isLoaded!}
       options={mergedOptions}

package/src/static/loader/index.ts

@@ -5,3 +5,4 @@ export { ButtonLoader } from './ButtonLoader'
 export { SnippetLoader } from './SnippetLoader'
 export { PaymentLoader } from './PaymentLoader'
 export type { PaymentLoaderProps } from './PaymentLoader'
+export { FullScreenLoader } from './FullScreenLoader'

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -6,7 +6,6 @@
   font-weight: 300;
   width: 100%;
 
-
   .indicator-label {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -25,8 +24,6 @@
   }
 }
 
-
-
 .activity-card {
   .availability-indicator {
     margin-top: 0.5rem;

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -179,7 +179,7 @@
     .form-disable-box {
       top: 20rem;
     }
-}
+  }
 }
 
 @include media-breakpoint-up(md) {

package/src/styles/static/Loader.scss

@@ -27,6 +27,15 @@
   }
 }
 
+.fullscreen-loader {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 5000;
+  top: 0;
+  left: 0;
+}
+
 .payment-loader {
   position: absolute;
   top: 50%;