From cc4453ae4ca42dfca7845e0c2ffd693a284ea916 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 4 Jun 2024 12:33:19 +0700
Subject: [PATCH] Update loading bar and spinner animations

The loading bar's completion property on unmounting has been removed to make its behavior more consistent. The css classes have been updated for spinner animation: The 'zoom-in-80' class was changed to 'zoom-in-50' and 'slide-in-from-bottom-4' was added. Also, the react-top-loading-bar's continuous start time has been increased to 300.
---
 packages/ui/src/makerkit/global-loader.tsx    |  4 +--
 .../makerkit/top-loading-bar-indicator.tsx    | 26 ++++++++-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/makerkit/global-loader.tsx b/packages/ui/src/makerkit/global-loader.tsx
index c474b4ac8..6e45f51cf 100644
--- a/packages/ui/src/makerkit/global-loader.tsx
+++ b/packages/ui/src/makerkit/global-loader.tsx
@@ -16,13 +16,13 @@ export function GlobalLoader({
   return (
     <>
       <If condition={displayTopLoadingBar}>
-        <TopLoadingBarIndicator completeOnUnmount={false} />
+        <TopLoadingBarIndicator />
       </If>
 
       <If condition={displaySpinner}>
         <div
           className={
-            'zoom-in-80 flex flex-1 flex-col items-center justify-center py-48 animate-in fade-in'
+            'flex flex-1 flex-col items-center justify-center py-48 animate-in fade-in zoom-in-50 slide-in-from-bottom-4'
           }
         >
           <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />
diff --git a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
index 241c4a9d1..0b6c93090 100644
--- a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
+++ b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
@@ -1,35 +1,31 @@
 'use client';
 
-import { createRef, useEffect, useRef } from 'react';
+import { createRef, useEffect } from 'react';
 
 import type { LoadingBarRef } from 'react-top-loading-bar';
 import LoadingBar from 'react-top-loading-bar';
 
-export function TopLoadingBarIndicator({
-  completeOnUnmount = true,
-}: {
-  completeOnUnmount?: boolean;
-}) {
+let running = false;
+
+export function TopLoadingBarIndicator() {
   const ref = createRef<LoadingBarRef>();
-  const runningRef = useRef(false);
 
   useEffect(() => {
-    if (!ref.current || runningRef.current) {
+    if (!ref.current || running) {
       return;
     }
 
+    running = true;
+
     const loadingBarRef = ref.current;
 
-    loadingBarRef.continuousStart(0, 250);
-    runningRef.current = true;
+    loadingBarRef.continuousStart(0, 300);
 
     return () => {
-      if (completeOnUnmount) {
-        loadingBarRef.complete();
-      }
-      runningRef.current = false;
+      loadingBarRef.complete();
+      running = false;
     };
-  }, [completeOnUnmount, ref]);
+  }, [ref]);
 
   return (
     <LoadingBar