Project

General

Profile

BUG #3882

Updated by Nazmul Hossain Shovon 4 months ago

When refreshing the page, the **border of the filter box briefly overlaps with the placeholder text** inside the filter fields.   
 This creates a noticeable **visual glitch** during the initial loading phase, causing flickering and an unstable UI appearance. 

 The filter box should render smoothly without any overlapping or distortion during page load. 

 **Screens:** Desktop (≥768px), Tablet (425px–768px), Mobile (≤375px)   
 **Tested By:** Tasfia Zaima   

 --- 

 ### Steps to Reproduce 
 1. Open the PQS Japan staging website.   
 2. Navigate to any page that contains the **Filter Box**.   
 3. Refresh the page multiple times.   
 4. Observe the filter input fields during the first second of loading.   
 5. Notice the border briefly overlapping or flickering over the placeholder text. 

 --- 

 ### Expected Result 
 The filter box border and placeholder text should render **cleanly and consistently** without overlapping or flickering from the start of page load. 

 ### Actual Result 
 During refresh, the border briefly overlaps the placeholder text, creating a visible flicker and UI distortion. 

 --- 

 ### Attachments 
 - [Video Evidence](https://drive.google.com/file/d/1N7cSvkBfLsk6yG9FSW5iGrypKv5tGOvL/view?usp=sharing) 

 ### Module / Section 
 Filter Box / Global Component 

 --- 

 ### Root Cause: 
 extra placeholder skeleton 

 --- 

 ### Impacted Area: 
 filter combobox skeleton

Back