@buerokratt-ria/common-gui-components 0.0.50 → 0.0.52

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.52] - 05.05.2026
+
+- Updated loading logic
+
+## [0.0.51] - 05.05.2026
+
+- History page header alignment
+
 ## [0.0.50] - 04.05.2026
 
 - Added authenticated person column

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/templates/history-page/src/History.scss

@@ -7,6 +7,12 @@
   width: 40%;
 }
 
+.header-container {
+    align-items: center;
+    display: flex;
+    gap: 24px;
+}
+
 .card-drawer-container {
   display: flex;
   width: 100%;
@@ -79,3 +85,15 @@
   overflow-y: auto;
   padding: get-spacing(haapsalu);
 }
+
+.spinner {
+  height: 24px;
+}
+
+.history-content {
+  &--loading {
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+  }
+}

package/templates/history-page/src/index.tsx

@@ -126,6 +126,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const showTest = envVal === undefined ? true : envVal.toLowerCase() === 'true';
     const [loading, setLoading] = useState(false);
     const abortRef = useRef<AbortController | null>(null);
+    const loadingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const timeoutAbortRef = useRef(false);
 
     const parseDateParam = (dateString: string | null) => {
       if (!dateString) return new Date();
@@ -334,8 +336,32 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             setTotalPages(res?.data?.response[0]?.totalPages ?? 1);
             setTotalCount(res?.data?.response[0]?.totalCount ?? null);
         },
+        onError: (error: AxiosError) => {
+            if (error.code === 'ERR_CANCELED' && !timeoutAbortRef.current) return;
+            timeoutAbortRef.current = false;
+            toast?.open({
+                type: 'error',
+                title: t('global.notificationError'),
+                message: 'Veateade',
+            });
+        },
     });
 
+    useEffect(() => {
+        if (getAllEndedChats.isPending) {
+            loadingTimeoutRef.current = setTimeout(() => {
+                timeoutAbortRef.current = true;
+                abortRef.current?.abort();
+            }, 10000);
+        } else if (loadingTimeoutRef.current) {
+                clearTimeout(loadingTimeoutRef.current);
+                loadingTimeoutRef.current = null;
+            }
+        return () => {
+            if (loadingTimeoutRef.current) clearTimeout(loadingTimeoutRef.current);
+        };
+    }, [getAllEndedChats.isPending]);
+
     const getChatById = useMutation({
         mutationFn: () =>
             apiDev.post('chats/get', {
@@ -1038,19 +1064,28 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
     return (
         <>
-            {displayTitle && (
-                <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
-            )}
+            <div className="header-container">
+                {displayTitle && (
+                    <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
+                )}
 
-            {showDownload && (
-                <div>
-                    <Button appearance={"primary"} onClick={downloadChatHistory}>
-                        {loading && <CgSpinner className="spinner"/>}
-                        {!loading && t('files.download_xlsx')}
-                    </Button>
-                </div>
-            )}
+                {showDownload && (
+                    <div>
+                        <Button
+                            type="button"
+                            appearance={"secondary"}
+                            size="s"
+                            style={{ marginTop: '4px' }}
+                            onClick={downloadChatHistory}
+                        >
+                            {loading && <CgSpinner className="spinner" />}
+                            {!loading && t('files.download_xlsx')}
+                        </Button>
+                    </div>
+                )}
+            </div>
 
+            <div className={`history-content${getAllEndedChats.isPending ? ' history-content--loading' : ''}`}>
             <Card>
                 <Track gap={16}>
                     {displaySearchBar && (
@@ -1425,6 +1460,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     </>
                 )}
             </div>
+            </div>
 
             {statusChangeModal && (
                 <Dialog

package/ui-components/Button/Button.scss

@@ -50,15 +50,17 @@
 
   &--secondary {
     background-color: get-color(white);
-    box-shadow: inset 0 0 0 2px get-color(black-coral-10);
-    color: get-color(black-coral-15);
+    box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
+    color: get-color(sapphire-blue-10);
 
     &:hover,
     &:active {
-      box-shadow: inset 0 0 0 2px get-color(black-coral-2);
+      background-color: get-color(sapphire-blue-0);
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
     }
 
     &:focus {
+      background-color: get-color(sapphire-blue-0);
       box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
     }
 
@@ -145,6 +147,8 @@
   }
 
   &--s {
-    padding: 4.5px 24px;
+    font-size: $veera-font-size-80;
+    padding: 4px 14px;
+    font-weight: 700;
   }
 }