Hey everyone, I have an app that I’m building which has a feed of items you get redirect to after you login. On that feed page, there are three <ion-list> elements that are responsible for:
- the main feed
- trending topics
- search elements
Depending on which of these filters are active, the appropriate <ion-list> gets shown, while the others are hidden.
Here is my code:
<ion-toolbar>
<ion-searchbar primary
[(ngModel)]="queryText"
(input)="searchFeeds()"
(blur)="cancelAndShowFeed()"
(submit)="cancelAndShowFeed()"
(click)="updateContentFilter('search')"
placeholder="Search">
</ion-searchbar>
</ion-toolbar>
<!-- Feed -->
<ion-content class="main-feed">
<ion-list [hidden]="chosenFilter !== 'all'">
<ion-card class="post-card" *ngFor="#post of posts">
<!-- Post Added -->
<post-added *ngIf="post.vfeedtype === 1" [post]="post"></post-added>
<!-- Question Added -->
<question-added *ngIf="post.vfeedtype === 2" [post]="post"></question-added>
<!-- Answer Added -->
<answer-added *ngIf="post.vfeedtype === 3" [post]="post"></answer-added>
</ion-card>
</ion-list>
<ion-list class="trending-topics" [hidden]="chosenFilter !== 'trending'">
<ion-card tappable (click)="goToTopic(topic.itopicid)" *ngFor="#topic of trendingTopics">
<ion-item class="mini-user-profile">
<ion-avatar item-left>
<img src="{{trendingTopicUrl}}{{topic.topicpic}}">
</ion-avatar>
<h2>{{topic.vtopic}}</h2>
</ion-item>
</ion-card>
</ion-list>
<!-- Search bar -->
<ion-list class="search-topics" [hidden]="chosenFilter !== 'search'">
<ion-item tappable (click)="goToType(feed)" *ngFor="#feed of feeds">
<ion-thumbnail item-left [hidden]="feed.Pic === ''">
<img src="http://ugigaming.com{{feed.Pic}}">
</ion-thumbnail>
<h2><span class="search-type">{{feed.Type | capitalizeFirstLetter}}: </span> {{feed.Key}}</h2>
<ion-icon name="arrow-forward" role="img" item-right class="search-type ion-ios-arrow-forward" aria-label="arrow forward"></ion-icon>
</ion-item>
</ion-list>
</ion-content>
The question I have is…is it bad to have that many ion lists in one <ion-content>? I’ve noticed considerable lag, specifically with the searchbar, input on the ios emulator and my ios device (running ios 9.3.1).
When I search for results, they get populated in the searchbar’s associated <ion-list>, but when I clear the searchbar and blur away from the input, I show the particular filter for either the feed or trending topics. Sometimes, though…when I’m focused on the searchbar, the searchbar, feed, and trending topics’ don’t get shown/hidden properly, leaving the UX to be all jumbled because the user will be typing into the searchbar, expecting search results, but instead they’re just looking at the feed, which they thought they had just navigated away from.
The results are inconsistent, so I just didn’t know if people had run into similar issues or have found a solution to making a slick and fluid searchbar entering/exiting experience, similar to Facebook, LinkedIn, Quora, etc.
Thanks!