Update loading indicators with animation and unmount completion option

Updated the global loading and top loading bar indicators. For the global loading indicator, added zoom-in and fade-in animations. As for the top loading bar indicator, introduced an option to control whether to complete its progress once it's unmounted.

packages/ui/src/makerkit/global-loader.tsx

@@ -1,12 +1,8 @@
-'use client';
-
 import { If } from './if';
 import { LoadingOverlay } from './loading-overlay';
 import { TopLoadingBarIndicator } from './top-loading-bar-indicator';
-import { Trans } from './trans';
 
 export function GlobalLoader({
-  children,
   displayLogo = false,
   fullPage = false,
   displaySpinner = true,
@@ -17,21 +13,19 @@ export function GlobalLoader({
   displaySpinner?: boolean;
   displayTopLoadingBar?: boolean;
 }>) {
-  const Text = children ?? <Trans i18nKey={'common:loading'} />;
-
   return (
     <>
       <If condition={displayTopLoadingBar}>
-        <TopLoadingBarIndicator />
+        <TopLoadingBarIndicator completeOnUnmount={false} />
       </If>
 
       <If condition={displaySpinner}>
         <div
-          className={'flex flex-1 flex-col items-center justify-center py-48'}
+          className={
+            'zoom-in-80 flex flex-1 flex-col items-center justify-center py-48 animate-in fade-in'
+          }
         >
-          <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage}>
-            {Text}
-          </LoadingOverlay>
+          <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />
         </div>
       </If>
     </>