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

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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

package/package.json

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

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

@@ -89,3 +89,11 @@
 .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', {
@@ -1059,6 +1085,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 )}
             </div>
 
+            <div className={`history-content${getAllEndedChats.isPending ? ' history-content--loading' : ''}`}>
             <Card>
                 <Track gap={16}>
                     {displaySearchBar && (
@@ -1433,6 +1460,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     </>
                 )}
             </div>
+            </div>
 
             {statusChangeModal && (
                 <Dialog