feat: add loading states, real-time JSON validation, tooltips, and active request indicator

- Add loading spinners to Send and Format JSON buttons
- Implement real-time JSON validation for HTTP body and GraphQL variables
- Add comprehensive tooltips across all interactive elements
- Improve GraphQL editor with better example placeholders
- Enhance active request visual indicator in sidebar with border, background, and shadow

Author: igorvieira

src/components/Folder.tsx

@@ -340,15 +340,20 @@ export const FolderComponent = ({
             <div
               key={file.fileName}
               className={clsx(
-                "flex items-center p-1.5 rounded hover:bg-gray-300 relative",
+                "flex items-center p-1.5 rounded hover:bg-gray-300 relative transition-all",
                 theme === "dark"
                   ? "bg-gray-700 hover:bg-gray-600"
                   : "bg-gray-200 hover:bg-gray-300",
                 file.fileName === currentRequestId &&
                   (theme === "dark"
-                    ? "border-l-purple-800 border-l-8 transition-all"
-                    : "border-l-purple-900 border-l-8 transition-all")
+                    ? "border-l-purple-500 border-l-4 bg-purple-900/30 shadow-lg"
+                    : "border-l-purple-600 border-l-4 bg-purple-50 shadow-lg")
               )}
+              title={
+                file.fileName === currentRequestId
+                  ? "Currently active request"
+                  : `Open ${file.displayName || "Request"}`
+              }
             >
               {editingFileName === file.fileName ? (
                 <div

src/components/GraphQLEditor.tsx

@@ -1,14 +1,50 @@
 import { useTheme } from "../context/ThemeContext";
 import { useRequest } from "../context/RequestContext";
 import clsx from "clsx";
+import { AlertCircle, CheckCircle, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
 
 export const GraphQLEditor = () => {
   const { theme } = useTheme();
-  const { graphqlQuery, graphqlVariables, setGraphqlQuery, setGraphqlVariables, formatGraphqlVariables } = useRequest();
+  const {
+    graphqlQuery,
+    graphqlVariables,
+    setGraphqlQuery,
+    setGraphqlVariables,
+    formatGraphqlVariables,
+  } = useRequest();
+  const [isFormattingVariables, setIsFormattingVariables] = useState(false);
+  const [variablesValidationError, setVariablesValidationError] = useState<
+    string | null
+  >(null);
 
   const queryLines = graphqlQuery.split("\n");
   const variablesLines = graphqlVariables.split("\n");
 
+  // Validate GraphQL variables JSON in real-time
+  useEffect(() => {
+    if (graphqlVariables.trim() === "" || graphqlVariables.trim() === "{}") {
+      setVariablesValidationError(null);
+      return;
+    }
+
+    try {
+      JSON.parse(graphqlVariables);
+      setVariablesValidationError(null);
+    } catch (error) {
+      if (error instanceof Error) {
+        setVariablesValidationError(error.message);
+      }
+    }
+  }, [graphqlVariables]);
+
+  const handleFormatVariables = async () => {
+    setIsFormattingVariables(true);
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    formatGraphqlVariables();
+    setIsFormattingVariables(false);
+  };
+
   return (
     <div className="mt-4 space-y-4">
       {/* GraphQL Query Section */}
@@ -50,13 +86,25 @@ export const GraphQLEditor = () => {
             <textarea
               value={graphqlQuery}
               onChange={(e) => setGraphqlQuery(e.target.value)}
-              placeholder="query {
-  users {
+              placeholder={`query GetUser($userId: ID!) {
+  user(id: $userId) {
     id
     name
     email
+    posts {
+      title
+      content
+    }
   }
-}"
+}
+
+# Or a mutation:
+# mutation CreateUser($input: UserInput!) {
+#   createUser(input: $input) {
+#     id
+#     name
+#   }
+# }`}
               className={clsx(
                 "flex-1 px-4 pb-4 text-xs focus:outline-0 ring-0 resize-none border-0 bg-transparent leading-6 overflow-y-auto",
                 theme === "dark" ? "text-white" : "text-gray-800"
@@ -69,14 +117,32 @@ export const GraphQLEditor = () => {
 
       {/* GraphQL Variables Section */}
       <div>
-        <label
-          className={clsx(
-            "block text-sm mb-2",
-            theme === "dark" ? "text-gray-300" : "text-gray-700"
-          )}
-        >
-          Variables (JSON)
-        </label>
+        <div className="flex items-center justify-between mb-2">
+          <label
+            className={clsx(
+              "block text-sm",
+              theme === "dark" ? "text-gray-300" : "text-gray-700"
+            )}
+          >
+            Variables (JSON)
+          </label>
+          {graphqlVariables.trim() !== "" &&
+            graphqlVariables.trim() !== "{}" && (
+              <div className="flex items-center gap-1.5 text-xs">
+                {variablesValidationError ? (
+                  <>
+                    <AlertCircle className="w-3.5 h-3.5 text-red-500" />
+                    <span className="text-red-500">Invalid JSON</span>
+                  </>
+                ) : (
+                  <>
+                    <CheckCircle className="w-3.5 h-3.5 text-green-500" />
+                    <span className="text-green-500">Valid JSON</span>
+                  </>
+                )}
+              </div>
+            )}
+        </div>
         <div
           className={clsx(
             "border rounded-xl min-h-[150px] max-h-[150px] overflow-hidden",
@@ -106,10 +172,14 @@ export const GraphQLEditor = () => {
             <textarea
               value={graphqlVariables}
               onChange={(e) => setGraphqlVariables(e.target.value)}
-              placeholder='{
-  "userId": 1,
-  "limit": 10
-}'
+              placeholder={`{
+  "userId": "123",
+  "limit": 10,
+  "input": {
+    "name": "John Doe",
+    "email": "[email protected]"
+  }
+}`}
               className={clsx(
                 "flex-1 px-4 pb-4 text-xs focus:outline-0 ring-0 resize-none border-0 bg-transparent leading-6 overflow-y-auto",
                 theme === "dark" ? "text-white" : "text-gray-800"
@@ -118,13 +188,37 @@ export const GraphQLEditor = () => {
             />
           </div>
         </div>
+        {variablesValidationError && (
+          <div
+            className={clsx(
+              "mt-2 p-2 rounded text-xs flex items-start gap-2",
+              theme === "dark"
+                ? "bg-red-900/20 text-red-400"
+                : "bg-red-100 text-red-700"
+            )}
+          >
+            <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
+            <span>{variablesValidationError}</span>
+          </div>
+        )}
         <button
-          onClick={formatGraphqlVariables}
+          onClick={handleFormatVariables}
+          disabled={isFormattingVariables || !!variablesValidationError}
+          title={
+            variablesValidationError
+              ? "Fix JSON errors before formatting"
+              : "Format Variables JSON"
+          }
           className={clsx(
-            "mt-2 py-2 rounded text-xs font-semibold cursor-pointer",
-            theme === "dark" ? "text-gray-600" : "text-gray-500"
+            "mt-2 py-2 rounded text-xs font-semibold cursor-pointer flex items-center gap-2",
+            theme === "dark" ? "text-gray-600" : "text-gray-500",
+            (isFormattingVariables || variablesValidationError) &&
+              "opacity-50 cursor-not-allowed"
           )}
         >
+          {isFormattingVariables && (
+            <Loader2 className="w-3 h-3 animate-spin" />
+          )}
           Format Variables JSON
         </button>
       </div>

src/components/RequestForm.tsx

@@ -9,7 +9,14 @@ import clsx from "clsx";
 import { SelectAuth } from "./SelectAuth";
 import { UsernameAndPassword } from "./UsernameAndPassword";
 import { BearerToken } from "./BearerToken";
-import { Trash2Icon, Copy, Check } from "lucide-react";
+import {
+  Trash2Icon,
+  Copy,
+  Check,
+  AlertCircle,
+  CheckCircle,
+  Loader2,
+} from "lucide-react";
 import { Checkbox } from "./Checkbox";
 import { VariablesTab } from "./VariablesTab";
 import { SchemaViewer } from "./SchemaViewer";
@@ -52,6 +59,10 @@ export const RequestForm = () => {
   const [urlCopied, setUrlCopied] = useState(false);
   const isInternalUpdate = useRef(false);
   const isLoadingParams = useRef(false);
+  const [isFormattingJson, setIsFormattingJson] = useState(false);
+  const [jsonValidationError, setJsonValidationError] = useState<string | null>(
+    null
+  );
 
   useEffect(() => {
     if (isInternalUpdate.current || isLoadingParams.current) {
@@ -97,6 +108,31 @@ export const RequestForm = () => {
 
   const lines = payload.split("\n");
 
+  // Validate JSON in real-time
+  useEffect(() => {
+    if (payload.trim() === "" || payload.trim() === "{}") {
+      setJsonValidationError(null);
+      return;
+    }
+
+    try {
+      JSON.parse(payload);
+      setJsonValidationError(null);
+    } catch (error) {
+      if (error instanceof Error) {
+        setJsonValidationError(error.message);
+      }
+    }
+  }, [payload]);
+
+  const handleFormatJson = async () => {
+    setIsFormattingJson(true);
+    // Simulate a brief delay for visual feedback
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    formatJson();
+    setIsFormattingJson(false);
+  };
+
   const addQueryParam = () => {
     setQueryParams([...queryParams, { key: "", value: "", enabled: true }]);
   };
@@ -164,14 +200,31 @@ export const RequestForm = () => {
 
         {activeTab === "body" && requestType === "http" && (
           <div className="mt-4">
-            <label
-              className={clsx(
-                "block text-sm mb-2",
-                theme === "dark" ? "text-gray-300" : "text-gray-700"
+            <div className="flex items-center justify-between mb-2">
+              <label
+                className={clsx(
+                  "block text-sm",
+                  theme === "dark" ? "text-gray-300" : "text-gray-700"
+                )}
+              >
+                JSON Payload (optional)
+              </label>
+              {payload.trim() !== "" && payload.trim() !== "{}" && (
+                <div className="flex items-center gap-1.5 text-xs">
+                  {jsonValidationError ? (
+                    <>
+                      <AlertCircle className="w-3.5 h-3.5 text-red-500" />
+                      <span className="text-red-500">Invalid JSON</span>
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle className="w-3.5 h-3.5 text-green-500" />
+                      <span className="text-green-500">Valid JSON</span>
+                    </>
+                  )}
+                </div>
               )}
-            >
-              JSON Payload (optional)
-            </label>
+            </div>
             <div
               className={clsx(
                 "border rounded-xl min-h-[492px] max-h-[492px] overflow-hidden",
@@ -210,13 +263,35 @@ export const RequestForm = () => {
                 />
               </div>
             </div>
+            {jsonValidationError && (
+              <div
+                className={clsx(
+                  "mt-2 p-2 rounded text-xs flex items-start gap-2",
+                  theme === "dark"
+                    ? "bg-red-900/20 text-red-400"
+                    : "bg-red-100 text-red-700"
+                )}
+              >
+                <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
+                <span>{jsonValidationError}</span>
+              </div>
+            )}
             <button
-              onClick={formatJson}
+              onClick={handleFormatJson}
+              disabled={isFormattingJson || !!jsonValidationError}
+              title={
+                jsonValidationError
+                  ? "Fix JSON errors before formatting"
+                  : "Format JSON"
+              }
               className={clsx(
-                "mt-2 py-2 rounded text-xs font-semibold cursor-pointer",
-                theme === "dark" ? "text-gray-600" : "text-gray-500"
+                "mt-2 py-2 rounded text-xs font-semibold cursor-pointer flex items-center gap-2",
+                theme === "dark" ? "text-gray-600" : "text-gray-500",
+                (isFormattingJson || jsonValidationError) &&
+                  "opacity-50 cursor-not-allowed"
               )}
             >
+              {isFormattingJson && <Loader2 className="w-3 h-3 animate-spin" />}
               Format JSON
             </button>
           </div>

src/components/SelectMethod.tsx

@@ -21,8 +21,9 @@ export const SelectMethod: React.FC<SelectMethodProps> = ({
         <select
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          title={`HTTP Method: ${value}`}
           className={clsx(
-            "block appearance-none w-full border rounded-lg py-2 px-4 pr-8 leading-tight focus:outline-none focus:ring-1",
+            "block appearance-none w-full border rounded-lg py-2 px-4 pr-8 leading-tight focus:outline-none focus:ring-1 cursor-pointer",
             theme === "dark"
               ? "text-white bg-[#10121b] border-purple-500 ring-purple-500 border-2"
               : " text-gray-700 bg-white border-purple-500 ring-purple-500 border-2"

src/components/ThemeToggle.tsx

@@ -15,6 +15,7 @@ export const ThemeToggle = () => {
           : "text-gray-700 hover:bg-gray-200"
       )}
       aria-label="Toggle theme"
+      title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
     >
       {theme === "light" ? (
         <Moon className="w-5 h-5" />