Display a loading icon until Firebase firestore fully loads data into a textview

Question

How do I go about implementing a loading icon while my app loads firebase firestore data into it? Right now, when I load in the app, it shows an empty textview, and once it's got the data from the database, it pops up. I'd like there to be a loading screen until the data is fully loaded into the activity before displaying, so there's no data pop-in.

I've tried to look at other solutions on this website but they're all from different programming languages or difficult for me to understand.

This is my simple code for getting data from a database, and storing it in a textView.

    welcomeTv = findViewById(R.id.welcomeTv);
    fStore = FirebaseFirestore.getInstance();

    fStore.collection("Users").document(FirebaseAuth.getInstance().getCurrentUser().getUid()).get().addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
        @Override
        public void onComplete(@NonNull Task<DocumentSnapshot> task) {

            if (task.isSuccessful() && task.getResult() != null) {
                username = task.getResult().getString("username");
                welcomeTv.setText(username);

                //other stuff
            } else {
                Toast.makeText(HomeActivity.this, "Currently logged in", Toast.LENGTH_SHORT).show();
            }


        }
    });

Answer 1

You can use ProgressBar and call ProgressBar.setVisibility(View.GONE) to hide the progress bar once the data is loaded.

First add a ProgressBar outside of the rest of your layout and set the visibilty of the layout you want to hide to gone

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"> // Initially hide all the body

        <TextView
            android:id="@+id/welcomeTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Welcome"
            app:layout_constraintBottom_toTopOf="@+id/logOutBtn"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.84000003" />

        <Button
            android:id="@+id/logOutBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Log out"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

And once the data is loaded hide the ProgressBar and make the mainContent layout Visible

ProgressBar progressBar = findViewById(R.id.progressBar); // Get ProgressBar reference
ConstraintLayout mainContent = findViewById(R.id.mainContent);
welcomeTv = findViewById(R.id.welcomeTv);
fStore = FirebaseFirestore.getInstance();


fStore.collection("Users").document(FirebaseAuth.getInstance().getCurrentUser().getUid()).get().addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
        @Override
        public void onComplete(@NonNull Task<DocumentSnapshot> task) {
            progressBar.setVisibility(View.GONE); // Hide Progress bar 
            mainContent.setVisibility(View.VISIBLE); // Show TextView

            if (task.isSuccessful() && task.getResult() != null) {

                username = task.getResult().getString("username");
                welcomeTv.setText(username);

                //other stuff
            } else {
                Toast.makeText(HomeActivity.this, "Currently logged in", Toast.LENGTH_SHORT).show();
            }


        }
    });

Hope it helps

Update: Updated the code with your layout mentioned in comments.

Answer 2

Add SweetAlert in your project. So when your data is loading you can put your sweetalert.

Use following Library :

implementation 'com.github.f0ris.sweetalert:library:1.5.1'

When you fire event for load data start the sweetalert then it will close when data in received

//Global Declaration
SweetAlertDialog pDialog;

pDialog = new SweetAlertDialog(this, SweetAlertDialog.PROGRESS_TYPE);
pDialog.getProgressHelper().setBarColor(Color.parseColor("#A5DC86"));
pDialog.setTitleText("Loading");
pDialog.setCancelable(false);
pDialog.show();
fStore.collection("Users").document(FirebaseAuth.getInstance().getCurrentUser().getUid()).get().addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
        @Override
        public void onComplete(@NonNull Task<DocumentSnapshot> task) {

            if (task.isSuccessful() && task.getResult() != null) {
                pDialog.dismiss();
                pDialog.dismissWithAnimation();
                username = task.getResult().getString("username");
                welcomeTv.setText(username);

                //other stuff
            } else {
                pDialog.dismiss();
                pDialog.dismisswithAnimation();
                Toast.makeText(HomeActivity.this, "Currently logged in", Toast.LENGTH_SHORT).show();
            }


        }
});