From 86e4bdcc7a98eef48224682ac4d9990ba018823b Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 4 Jun 2024 02:00:23 +0700
Subject: [PATCH] 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       | 16 +++++-----------
 .../src/makerkit/top-loading-bar-indicator.tsx   | 12 +++++++++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/makerkit/global-loader.tsx b/packages/ui/src/makerkit/global-loader.tsx
index 3818515cf..c474b4ac8 100644
--- a/packages/ui/src/makerkit/global-loader.tsx
+++ b/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>
     </>
diff --git a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
index ebbaf2c82..241c4a9d1 100644
--- a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
+++ b/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