loading issue screenshot An interesting problem has arisen in my project. I have implemented a label box within a div using a for loop. The label has a CSS property for bottom-border. However, upon page load, only the bottom border line is visible. It's not until the content loads and the images appear in the img tag that everything becomes fully visible. What I want to achieve is to remove the bottom border during the loading process. To accomplish this, the [hidden] variable is initially set as false, which changes after data is retrieved through subscription.
The relevant code files are provided below:
.html file
<div [hidden]="varible" class="wrapper">
<div class="tab" *ngFor="let items of itemsData?.data;let i=index;">
<input id={{i}} type="checkbox" name="tabs">
<label for={{i}}>
<img src={{items.imgSrc}}>
<span>{{items.title}}</span>
</label>
</div>
</div>
.scss file
wrapper {
height: calc(100vh - 3.5em);
overflow-y: scroll;
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
.tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab label {
position: relative;
display: block;
font-weight: bold;
color: #444;
cursor: pointer;
// Specific solution added here
margin-left: 16px;
margin-right: 16px;
img {
margin: 10px 10px 10px 0px;
}
span {
position: relative;
bottom: 22px;
font-size: 13px;
color: #666666;
letter-spacing: 0.59px;
font-weight: 500;
}
}
}
.ts file
public varible: boolean = true;
ngOnInit() {
this.service.getResults().subscribe(
(response: any) => {
this.searchItemsData = response;
this.varible= false;
},
error => {
console.log(error);
}
);
}