How to preload while loading something

I have no idea about PHP but I know that these types of problems are solved with Threads. I hope you know English because I found a manual on how to use threads in PHP

link

<section id="post">
<article class="post_view_public">
          <div class="post_view_loading">
             <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                <span class="sr-only">Cargando...</span>
          </div>
           <script type="text/javascript">
               function ocultar(){
                document.getElementById('post_view_loading').classList.add = "mostrar_loading_post" ;
                document.getElementById('post_view_public').classList.add = "ocultar_objetos";
                }
            </script>

            <div id="post_view_public">
            <div class="up">
            <?php
                    $sql = "SELECT * FROM 'a_redcdark_social' WHERE id_usuarios=".$AMIGO_USUARIO_RED;
                    $resultado2 = $mysqli->query($sql);
                    if(!$resultado2 = $mysqli->query($sql)) {
                        echo "La consulta falló ";
                        echo "Error: Lo sentimos, error a al conectarse, reinicie la pagina.";
                        echo "Query: " . $sql . "\n";
                        echo "Errno: " . $mysqli->errno . "\n";
                        echo "Error: " . $mysqli->error . "\n";
                        exit;
                    }

                    // No hay datos en esa consulta
                    if ($resultado2->num_rows === 0) {
                        echo "No Tienes amigos agregadoss";
                    }

                     while($row2 = $resultado2->fetch_assoc()) {

                         ?>
                <a href="?page=profile&id=<?php echo $row2['id_usuarios'];?>">
                    <img src="<?php echo $row2['RED_imagen_perfil'];?>" alt="user">
                    <h3><?php echo $row2['RED_nombre']; ?> <?php echo $row2['RED_apellido']; ?></h3>
                </a>

                <?php
                     }
                ?>
                <i class="fa fa-ellipsis-h"></i>
            </div>

            <div class="center">
        <?php

        if($row['POST_imagen'] == ""){
            echo $row['POST_texto'];
        }else{
            echo $row['POST_texto'];
            ?>

            <div class="imagen"><img src="<?php echo $row['POST_imagen'];?>" alt=""></div>
        <?php
        }
        ?>
            </div>
            <div class="downcent">
               <i class="fa fa-thumbs-o-up"> Like</i>
                <i class="fa fa-globe"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
            <div class="down">
                <img class="comentuser" src="images/example/myuser.jpg" alt=""><span class="info">Usuario</span>

                <input type="text" placeholder="Comenta esta publicación">

                <i class="fa fa-smile-o"></i>
                <i>:v</i>
                <i class="fa fa-camera"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
            </div>
            <script type="text/javascript">
               function mostrar(){
                    document.getElementById('post_view_loading').classList.remove = "mostrar_loading_post" ;
                   document.getElementById('post_view_loading').classList.add = "ocultar_objetos" ;
                   document.getElementById('post_view_public').classList.remove = "ocultar_objetos";
                    document.getElementById('post_view_public').classList.add = "mostrar_objetos";


                }
            </script>
        </article>

</section>

This code occurred to me, I know it is not to comment on mine, but it is so that they no longer respond.

But if there is another better way

You can make a simple div that shows an image while it is loading, either wait a moment etc ...

<div id="pg_cargando"><img src="tu imagen aqui" alt="" width="550" height="400" border="0" /></div>

With the following css:

#pg_cargando{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:999999;
background-color: #FFF;
text-align: center;
margin: 0 auto;
}

Then in the header you start a function in JS that hides the loading image:

<script type="text/javascript">
    function QuitarCargando(){
    document.getElementById("pg_cargando").style.visibility="hidden";
 }
 </script>

And in your body so that when it finishes loading with the onload, hide the image of loading and show the page:

<body onload="QuitarCargando();">