How to load images in a RecyclerView like Pintrest app

Question

Hello there i have a recylerview with images where the hieght is wrap_content and width is match_parent just like pintrest but the issue is when the recylerview is loaded the images are not loaded properly it is a mess here is screen shot of it

I know this is becuase im not using a place holder, but even if i add a circular progress bar it will show on each of the image (which i dont want) i want that just like how pintrest load images with one circular progress bar and all images are loaded . im talking about this

How can i achive that functionality

Note : If anyone want more refrence of the code please tell me i will upload the requested file code

Here is my Code

post_item_container_search.xml // this the layout is for images

<RelativeLayout 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="wrap_content"
    android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="11dp"
        android:layout_marginEnd="5dp"
        app:cardBackgroundColor="@color/grey"
        app:cardCornerRadius="13dp"
        app:cardElevation="1dp"
        app:cardMaxElevation="4dp">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:contentDescription="@string/todo"
                app:shapeAppearanceOverlay="@style/RoundedCorner" />

            <TextView
                android:id="@+id/rankedNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/circular_background_text"
                android:fontFamily="@font/roboto"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="15sp"
                android:textStyle="bold"
                tools:ignore="RtlHardcoded" />
        </FrameLayout>
    </com.google.android.material.card.MaterialCardView>
</RelativeLayout>

PostAdapter_Search.java // adapter class which inflates the recylervew

package com.example.myappnotfinal.AdaptersAndMore;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.example.myappnotfinal.R;
import com.google.android.material.imageview.ShapeableImageView;

import java.util.List;

public class PostAdapter_Search extends RecyclerView.Adapter<PostAdapter_Search.PostViewHolder> {
    public static List<Upload> mUploads;
    public Context mcontext;
    View view;


    public PostAdapter_Search(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


    @NonNull
    @Override
    public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container_search, parent, false);
        return new PostViewHolder(view);

    }

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Upload uploadCurrent = mUploads.get(position);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                .centerCrop()
                .fitCenter()
                .into(holder.imageView);

        holder.textView.setText(String.valueOf(position + 1));

    }

    @Override
    public int getItemCount() {
        int limit = 10;
        return Math.min(mUploads.size(), limit);
    }

    public static class PostViewHolder extends RecyclerView.ViewHolder {
        ShapeableImageView imageView;
        TextView textView;

        public PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageView);
            textView = itemView.findViewById(R.id.rankedNumber);
        }


    }
}

Update 1 // aded FlexBoxLayoutManager

Ok i have aded FlexBoxLayoutManager but there is only one row and i dont know how to add 2 rows in it

Search_Fragment.java

FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(getContext());
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);
        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_END);
        postRecyclerView.setLayoutManager(flexboxLayoutManager);

and also can anyone tell me what this line do

.setJustifyContent(JustifyContent.FLEX_END);

Before adding FlexBoxLayoutManager i used this

postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );