From d1aa60e14d05f2c8857965f37acaf04c3ea358e0 Mon Sep 17 00:00:00 2001
From: Jayabharathi <jayabhajayas@gmail.com>
Date: Mon, 3 Nov 2025 18:08:26 +0530
Subject: [PATCH] [#115] | Jayabharathi | Show Navbar only when there is a
 response

Signed-off-by: Jayabharathi <jayabhajayas@gmail.com>
---
 src/components/ResponsePanel/index.tsx  | 2 +-
 tests/components/ResponsePanel.test.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ResponsePanel/index.tsx b/src/components/ResponsePanel/index.tsx
index 088f359..931fd3b 100644
--- a/src/components/ResponsePanel/index.tsx
+++ b/src/components/ResponsePanel/index.tsx
@@ -116,7 +116,7 @@ const ResponsePanel = (props: ResponsePanelProps) => {
   return (
     <div className="response-panel" data-testid={'response-panel'}>
       <div className="response-panel-header">
-        <Navbar items={itemsConfig} />
+        {isRequestCompleted && <Navbar items={itemsConfig} />}
         {isRequestCompleted && (
           <div className="response-header-right">
             <Status
diff --git a/tests/components/ResponsePanel.test.tsx b/tests/components/ResponsePanel.test.tsx
index 6fc381c..a28beca 100644
--- a/tests/components/ResponsePanel.test.tsx
+++ b/tests/components/ResponsePanel.test.tsx
@@ -61,7 +61,7 @@ describe(`ResponsePanel`, () => {
 
   describe(`Default Rendering components`, () => {
     it(
-      'should render Navbar and EmptyPlaceholder when and isLoading is false and isNoRequestTriggered is true',
+      'should render EmptyPlaceholder and not Navbar when isLoading is false and isNoRequestTriggered is true',
       () => {
         const props = {
           isLoading: false,
@@ -72,12 +72,12 @@ describe(`ResponsePanel`, () => {
         const navbar = screen.queryByTestId('navbar');
         const emptyPlaceholder = screen.queryByTestId('empty-placeholder');
 
-        expect(navbar).toBeInTheDocument();
+        expect(navbar).not.toBeInTheDocument();
         expect(emptyPlaceholder).toBeInTheDocument();
       }
     );
 
-    it(`should render Navbar and Spinner when isLoading is true`, () => {
+    it(`should render Spinner and not Navbar when isLoading is true`, () => {
       const props = {
         isLoading: true,
       };
@@ -86,7 +86,7 @@ describe(`ResponsePanel`, () => {
       const spinner = screen.queryByTestId('spinner');
       const navbar = screen.queryByTestId('navbar');
 
-      expect(navbar).toBeInTheDocument();
+      expect(navbar).not.toBeInTheDocument();
       expect(spinner).toBeInTheDocument();
     });