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}>
+          <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />
-            {Text}
-          </LoadingOverlay>
         </div>
       </If>
     </>

packages/ui/src/makerkit/top-loading-bar-indicator.tsx

@@ -5,7 +5,11 @@ import { createRef, useEffect, useRef } from 'react';
 import type { LoadingBarRef } from 'react-top-loading-bar';
 import LoadingBar from 'react-top-loading-bar';
 
-export function TopLoadingBarIndicator() {
+export function TopLoadingBarIndicator({
+  completeOnUnmount = true,
+}: {
+  completeOnUnmount?: boolean;
+}) {
   const ref = createRef<LoadingBarRef>();
   const runningRef = useRef(false);
 
@@ -20,10 +24,12 @@ export function TopLoadingBarIndicator() {
     runningRef.current = true;
 
     return () => {
-      loadingBarRef.complete();
+      if (completeOnUnmount) {
+        loadingBarRef.complete();
+      }
       runningRef.current = false;
     };
-  }, [ref]);
+  }, [completeOnUnmount, ref]);
 
   return (
     <LoadingBar