How do I update my skeleton layout code such that it doesn't block my viewpager?

I am trying to add skeleton layouts/effect to my viewpager, but due to some issue, the shimmer layout loads and right after i see a white screen instead of . viewpager data content.

I am currently using the libraries :

 implementation 'com.ethanhua:skeleton:1.1.2'
  implementation 'io.supercharge:shimmerlayout:2.1.0'

Here's my code :

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:paddingTop="64dp"
  >
    <View
        android:id="@+id/roomsTitle"
        style="@style/Headline2LeftBlack"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_gravity="center_vertical"
        android:background="@color/black_12"
        android:text="@string/meeting_rooms"
        android:textAppearance="@style/TextAppearance.Text.Chronicle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:paddingBottom="16dp"/>

    <View
        android:id="@+id/room1"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:clipToPadding="false"
        android:overScrollMode="never"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:paddingBottom="16dp"
        android:background="@color/black_12"
        app:layout_constraintTop_toBottomOf="@id/roomsTitle"  />


    <View
        android:id="@+id/room2"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:clipToPadding="false"
        android:overScrollMode="never"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:background="@color/black_12"
        app:layout_constraintTop_toBottomOf="@id/room1"  />


</android.support.constraint.ConstraintLayout>

The above code is my layout for skeleton view. The code below is my viewpager code in activity : public class RoomListsActivity extends BaseActivity implements RoomListsMvpView {

@Inject
RoomListsPagerAdapter mPagerAdapter;


@BindView(R.id.room_lists_view_pager)
ViewPager mViewPager;

@BindView(R.id.tab_layout)
TabLayout mTabLayout;

private SkeletonScreen skeletonScreen;

public static Intent getStartIntent(Context context) {
    return new Intent(context, RoomListsActivity.class);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_room_lists);

    getActivityComponent().inject(this);

    setUnBinder(ButterKnife.bind(this));

    mPresenter.onAttach(this);

    setUp();
}

@Override
protected void setUp() {
    setSupportActionBar(mToolbar);

    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_backarrow);
        getSupportActionBar().setElevation(0);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    }

    mViewPager.setAdapter(mPagerAdapter);
    mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            mViewPager.setCurrentItem(tab.getPosition());
            TextView text = (TextView) tab.getCustomView();
            if (text != null) {
                text.setTypeface(null, Typeface.BOLD);
                text.setTextColor(ContextCompat.getColor(RoomListsActivity.this, R.color.reddish));
            }
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            TextView text = (TextView) tab.getCustomView();
            if (text != null) {
                text.setTypeface(null, Typeface.NORMAL);
                text.setTextColor(ContextCompat.getColor(RoomListsActivity.this, R.color.brownish_grey));
            }
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) { }
    });

    mRefresh.setOnRefreshListener(this::refreshassistant);

    mPresenter.getAvailableRooms();
}


@Override
protected void onDestroy() {
    mPresenter.onDetach();
    super.onDestroy();
}

@Override
public void showRooms(List<RoomList> roomLists) {
    int selectedTab = mTabLayout.getSelectedTabPosition();

    mPagerAdapter.setRooms(roomLists);

    if (mTabLayout.getTabCount() != roomLists.size()) {
        mTabLayout.removeAllTabs();
        for (int i = 0; i < roomLists.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(roomLists.get(i).getRoomTitle()));
        }

        mViewPager.setOffscreenPageLimit(mTabLayout.getTabCount());

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            if (tab != null) {
                TextView tabTextView = new TextView(this);
                tab.setCustomView(tabTextView);
                tabTextView.getLayoutParams().width = ViewGroup.LayoutParams.WRAP_CONTENT;
                tabTextView.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;

                tabTextView.setText(tab.getText());

                if (i == 0) {
                    tabTextView.setTypeface(null, Typeface.BOLD);
                    tabTextView.setTextColor(ContextCompat.getColor(this, R.color.reddish));
                }
            }
        }

        if (selectedTab > 0 && selectedTab < mTabLayout.getTabCount()) {
            TabLayout.Tab tab = mTabLayout.getTabAt(selectedTab);
            if (tab != null) {
                tab.select();
            }
        }
    }
}

@Override
public void showLoading() {
    skeletonScreen = Skeleton.bind(mViewPager)
            .load(R.layout.item_skeleton_roomlist)
            .duration(1000)
            .color(R.color.shimmer_color)
            .angle(20)
            .shimmer(false)
            .show();

}

@Override
public void hideLoading() {
    super.hideLoading();
    skeletonScreen.hide();
    mRefresh.setRefreshing(false);
}

}

For some reason

    {
      skeletonScreen = Skeleton.bind(mViewPager)
                    .load(R.layout.item_skeleton_roomlist)
                    .duration(1000)
                    .color(R.color.shimmer_color)
                    .angle(20)
                    .shimmer(false)
                    .show();
}

is overriding my viewpager code and shows a blank white screen instead of content. Any idea how I can go about fixing this?

Thanks!

from How do I update my skeleton layout code such that it doesn't block my viewpager?