Fix: Remove unnecessary login message

The login message was appearing even when the user was logged in. The request on app load is only to fetch existing instances.

src/components/auth/ProtectedRoute.tsx

@@ -2,7 +2,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { useToast } from "@/components/ui/use-toast";
-import { supabase } from "@/integrations/supabase/client";
+import LoadingState from '../whatsapp/LoadingState';
 
 interface ProtectedRouteProps {
   children: ReactNode;
@@ -15,6 +15,7 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const location = useLocation();
 
   useEffect(() => {
+    // Check authentication status only once on mount
     const checkAuthentication = async () => {
       try {
         setIsLoading(true);
@@ -29,12 +30,6 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
         } else {
           console.log('Nenhuma sessão encontrada, redirecionando para login');
           setIsAuthenticated(false);
-          
-          // Toast message is moved here inside useEffect, not during render
-          toast({
-            title: "Autenticação necessária",
-            description: "Por favor, faça login para acessar esta página"
-          });
         }
       } catch (error) {
         console.error('Erro ao verificar autenticação:', error);
@@ -45,17 +40,24 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
     };
     
     checkAuthentication();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);  // Remove toast from dependencies to prevent re-renders
+  }, []); // Execute only on mount
 
-  // Mostrar estado de carregamento
+  // Se estiver carregando, mostrar estado de carregamento
   if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Carregando...</div>;
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <LoadingState message="Verificando autenticação..." />
+      </div>
+    );
   }
   
   // Se não estiver autenticado, redirecionar para a página de login
-  if (isAuthenticated === false) {
-    // Remove the toast from here as it's causing infinite re-renders
+  if (!isAuthenticated) {
+    // Use toast here - it's safer after render and won't cause infinite re-renders
+    toast({
+      title: "Autenticação necessária",
+      description: "Por favor, faça login para acessar esta página"
+    });
     return <Navigate to="/auth" state={{ from: location }} replace />;
   }
   

src/components/whatsapp/LoadingState.tsx

@@ -5,12 +5,14 @@ interface LoadingStateProps {
   message?: string;
   size?: 'small' | 'medium' | 'large';
   className?: string;
+  centered?: boolean;
 }
 
 const LoadingState = ({ 
   message = "Buscando instância...", 
   size = 'medium',
-  className = ''
+  className = '',
+  centered = true
 }: LoadingStateProps) => {
   const spinnerSizes = {
     small: 'h-6 w-6',
@@ -25,7 +27,7 @@ const LoadingState = ({
   };
 
   return (
-    <div className={`flex justify-center items-center p-4 ${className}`}>
+    <div className={`flex items-center ${centered ? 'justify-center' : ''} p-4 ${className}`}>
       <div className={`animate-spin rounded-full ${spinnerSizes[size]} border-b-2 border-primary`}></div>
       {message && <p className={`ml-3 ${textSizes[size]}`}>{message}</p>}
     </div>

src/hooks/whatsApp/useWhatsAppInstance.ts

@@ -25,8 +25,14 @@ export const useWhatsAppInstance = (
 
   // Function to fetch specific instance by name
   const fetchInstanceByName = async () => {
-    // Skip if user not logged in or no instance name
-    if (!currentUserId || !instanceName.trim()) {
+    // Skip if no instance name
+    if (!instanceName.trim()) {
+      return;
+    }
+
+    // Verificar se o usuário está autenticado
+    if (!currentUserId) {
+      console.log('Usuário não autenticado, pulando busca de instância');
       return;
     }
 
@@ -90,18 +96,12 @@ export const useWhatsAppInstance = (
     }
   };
 
-  // Run once when component mounts
+  // Run once when component mounts or currentUserId changes
   useEffect(() => {
-    if (currentUserId) {
+    if (instanceName && currentUserId) {
       fetchInstanceByName();
-    } else {
-      toast({
-        title: "Login necessário",
-        description: "Você precisa estar logado para ver suas instâncias do WhatsApp.",
-        variant: "destructive"
-      });
     }
-  }, [currentUserId]); // Only depend on userId, not instanceName
+  }, [currentUserId]); // Only depend on userId changes
 
   return {
     instanceName,