How to make my logged-in user-role shortcode displaying name instead of slug?

Based on what you wrote, you should use instead :

if ( ! is_admin() ) {
    function get_user_role() {
        global $wp_roles;
        $user = wp_get_current_user();
        $roles = ( array ) $user->roles;
        foreach ( $roles as $role ) {
            $user_role="<p>" . $wp_roles->roles[ $role ]['name'] . '</p>';
        }
        return $user_role;
    }
    add_shortcode( 'display_user_role', 'get_user_role' );
}

It works pretty well on my install !