From 19827fce849704a63b538e61671cdc7424fdb2d6 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 9 Mar 2025 18:53:13 -0600
Subject: [PATCH] feat(templates): add loading state and error handling for
 template fetching

- Implement loading spinner during template retrieval
- Add error alert for template fetching failures
- Enhance user experience with informative loading and error messages
- Import Loader2 icon for loading state visualization
---
 .../dashboard/project/add-template.tsx        | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 8f4f792ec..759c7ade3 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -62,6 +62,7 @@ import {
 	HelpCircle,
 	LayoutGrid,
 	List,
+	Loader2,
 	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
@@ -99,7 +100,12 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 		}
 	}, [customBaseUrl]);
 
-	const { data } = api.compose.templates.useQuery(
+	const {
+		data,
+		isLoading: isLoadingTemplates,
+		error: errorTemplates,
+		isError: isErrorTemplates,
+	} = api.compose.templates.useQuery(
 		{ baseUrl: customBaseUrl },
 		{
 			enabled: open,
@@ -270,7 +276,20 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 							</AlertBlock>
 						)}
 
-						{templates.length === 0 ? (
+						{isErrorTemplates && (
+							<AlertBlock type="error" className="mb-4">
+								{errorTemplates?.message}
+							</AlertBlock>
+						)}
+
+						{isLoadingTemplates ? (
+							<div className="flex justify-center items-center w-full h-full flex-row gap-4">
+								<Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
+								<div className="text-lg font-medium text-muted-foreground">
+									Loading templates...
+								</div>
+							</div>
+						) : templates.length === 0 ? (
 							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
 								<SearchIcon className="text-muted-foreground size-6" />
 								<div className="text-xl font-medium text-muted-foreground">