Make the user waiting for activity to finish loading

everyone, I am working on a project that retrieves data from firestore and some of that contains URL for an image. when I start the app I notice a delay when loading the image. so I thought about what I’ve seen in the Facebook app that when loading an image showing a view with some animation to inform the user that the app still loading in the background, any help, please.

this is how I retrieve the data

 PostsAdapter=new FirestoreRecyclerAdapter<docs,PostsViewHolder>(allPosts) {
        @NonNull
        @Override
        public PostsViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view= 
   LayoutInflater.from(parent.getContext()).inflate(R.layout.single_post,parent,false);

            return new PostsViewHolder(view);
        }

        @Override
        protected void onBindViewHolder(@NonNull final PostsViewHolder holder, int position, @NonNull final docs model) {


            holder.postTitle.setText(model.getTitle());
            holder.postImage.setText(model.getPostimage());
            holder.image_1.setText(model.getImage_1());
            holder.image_2.setText(model.getImage_2());
            holder.content_1.setText(model.getContent_1());
            holder.content_2.setText(model.getContent_2());

            holder.Date.setText(model.getDate());
            holder.postId.setAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.item_animation_fall_down));
            holder.singlePostCard.setAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.slide_right));
            holder.titleLayout.setAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.slide_up));


           Glide.with(requireContext())
                    .load(model.getPostimage())
                    .error(R.drawable.error_uom)
                    .placeholder(R.drawable.ic_account)
                   
                    .into(holder.spImage);
            holder.itemView.playSoundEffect(SoundEffectConstants.CLICK);
            holder.itemView.setOnClickListener(v -> {
                Intent intent = new Intent(v.getContext(), full_content.class);



                vu=v;
                holder.itemView.playSoundEffect(0);
                intent.putExtra("postImage",model.getPostimage());
                intent.putExtra("postTitle",model.getTitle());
                intent.putExtra("content_1",model.getContent_1());
                intent.putExtra("content_2",model.getContent_2());
                intent.putExtra("image_1",model.getImage_1());
                intent.putExtra("image_2",model.getImage_2());
                intent.putExtra("date",model.getDate());



                v.getContext().startActivity(intent);
            });
        }
    };

Answer

You can add “ProgressBar” widget in your “single_post.xml” file, then make its reference on your ViewHolder class (PostViewHolder) and then last step is to change your Glide code in “onBindViewHolder” method.

single_post.xml

<ProgressBar
    android:id="@+id/imageProgressBar"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:visibility="visible" />

PostViewHolder

ProgressBar imgProgressBar = (ProgressBar) findViewById(R.id.imageProgressBar);

OnBindViewHolder Method

Glide.with(requireContext())
       .load(model.getPostimage())
       .listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                holder.imgProgressBar.setVisibility(View.GONE);
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                holder.imgProgressBar.setVisibility(View.GONE);
                return false;
            }
        })
       .error(R.drawable.error_uom)
       .placeholder(R.drawable.ic_account)