Delay in activity transition on NativeScript 2.5.0 - Android


#1

I am using Nativescript 2.5.0 and UI for NativeScript.
After login, the next page loaded has a radsidedrawer, 3 tabs for which I am using TabView and each tab contains a radlistview.
The problem I am facing is on Android. The translation from one login page to the next page is not smooth and the screen goes blank for few seconds. I tried removing all the logic and tried navigating to the page and still facing the same issue. On iOS I am not facing any such issue and the translation is smooth.
This is what the landing page looks like:

<page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:widgets="common/widgets"
  xmlns:notifications="pages/landing/notifications"
  xmlns:requests="pages/landing/requests"
  xmlns:alln="pages/landing/allnoti"
  loaded="loaded">

  <page.actionBar>
    <action-bar title="iStart">
      <action-bar.titleView>
        <StackLayout orientation="horizontal" ios:horizontalAlignment="center" android:horizontalAlignment="left">
          <!--<Image src="res://acicon" class="action-image" /> -->
          <Label text="  iStart" class="action-label" />
        </StackLayout>
      </action-bar.titleView>
      <action-bar.actionItems>
        <android>
          <actionItem android.position="actionBarIfRoom" tap="showSocial" icon="res://ic_people_white_24dp" />
          <actionItem android.position="actionBarIfRoom" tap="toggleDrawer" icon="res://ic_menu" />
        </android>
        <ios>
          <action-item icon="res://ic_people_white" ios.position="right" tap="showSocial" />
          <action-item icon="res://ic_menu" ios.position="right" tap="toggleDrawer" />
        </ios>
      </action-bar.actionItems>
    </action-bar>
  </page.actionBar>

  <drawer:rad-side-drawer id="drawer" drawerContentSize="180" drawerLocation="right">
    <drawer:rad-side-drawer.mainContent>

      <!-- Landing page contents -->
      <ios>
        <TabView class="tabview-look" style="font-family: FontAwesome; font-size: 15;" selectedColor="#990000" loaded="mainContentLoaded" id="tabView1">
          <TabView.items>
            <TabViewItem title="&#xf003; All" >
              <TabViewItem.view>
                <alln:allnoti />
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf0a2; Notifications" >
              <TabViewItem.view>
                <notifications:notifi />
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf044; Requests" >
              <TabViewItem.view>
                <requests:request />
              </TabViewItem.view>
            </TabViewItem>
          </TabView.items>
        </TabView>
      </ios>

      <android>
        <TabView class="tabview-look" style="font-size: 10.25;" selectedColor="#990000" loaded="mainContentLoaded" id="tabView1">
          <TabView.items>
            <TabViewItem title="&#xf003; All" >
              <TabViewItem.view>
                <alln:allnoti />
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf0a2; Notifications" >
              <TabViewItem.view>
                <notifications:notifi />
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf044; Requests" >
              <TabViewItem.view>
                <requests:request />
              </TabViewItem.view>
            </TabViewItem>
          </TabView.items>
        </TabView>
      </android>
    </drawer:rad-side-drawer.mainContent>
    <drawer:rad-side-drawer.drawerContent>
      <widgets:drawer-content />
    </drawer:rad-side-drawer.drawerContent>
  </drawer:rad-side-drawer>

</page>

And this is the content inside the TabView:

<stack-layout loaded="onViewLoaded" unloaded="onViewUnloaded"
xmlns:lv="nativescript-telerik-ui/listview" >
  <!-- entirety of the tab's content -->
  <GridLayout>
    <lv:RadListView id="lv1" items="{{notificationList}}" row="1" pullToRefresh="true" pullToRefreshInitiated="pullToRefreshInitiated" itemTap="onTap">
      <lv:RadListView.listViewLayout>
        <lv:ListViewLinearLayout scrollDirection="Vertical" />
      </lv:RadListView.listViewLayout>
      <lv:RadListView.itemTemplate>
        <grid-layout rows="auto, auto, auto" columns="auto, auto, *" class="topgrid">
          <grid-layout row="0" colSpan="3" rows="auto" class="headingRegion" columns="auto, *, auto">
            <label text="{{ico, ico}}" class="{{class, class}}" col="0" rowSpan="2" row="0"/>
            <label text="{{title, title}}" textWrap="true" margin="8" class="size16b align-center" col="1" />
            <label text="{{date, date}}" class="size10" col="2"/>
          </grid-layout>
          <label text="{{intro, intro}}" textWrap="true" class="size16" row="1" colSpan="3" />
        </grid-layout>
      </lv:RadListView.itemTemplate>
    </lv:RadListView>
  </GridLayout>
</stack-layout>

Here are the links to the videos of the same code on Android and iOS to give a better understanding:
Android: https://youtu.be/_cQU1HjNLI0
iOS https://youtu.be/GAk7OUT8VXg

Can someone help me on this or point me in the right direction?