I am looking for coding advice... The bottom line is that I am dealing with three objects - Contacts, Skills, and a junction table.  I want to display the data such that it appears as it would in a grouped by report.  A skill with the contacts with that skill under it (without the skill repeating).  Currently, I retrieve the records from the junction object and put them in an arraylist.  I then take that list and pickout the skills and put them in a string.  VF loops through the string and in the table displays records whose skill is equal to the string element that we are on.  Below is the code I have that works but is slow loading.

// <apex:page showHeader="false" action="{!load}" standardStylesheets="true" standardController="account" extensions="DisplayContactExpertise" sidebar="false" docType="html-5.0" applyBodyTag="False" applyHtmlTag="False">
<style type="text/css">
        body {
    background-color: white;
}
        .pbTitle {
        white-space:nowrap;
        border:white;
    }
    </style>
    <form>
        
    
    <apex:repeat value="{!skills}" var="skill">
    <apex:pageBlock title="{!skill}" >
<apex:pageBlockSection columns="1" >
            <apex:actionStatus id="mystatus" startText="Loading.....">
            <apex:facet name="stop">
            <apex:outputPanel id="out">

    
    
    
    <apex:pageBlockTable align="center" border="3" value="{!contactskills}" var="contactskill" columnsWidth="200px, 200px, 400px">
<apex:column headerValue="Organization" rendered="{!IF(skill == contactskill.mkskill__r.name, true, false)}"> 
<apex:outputLink style="text-decoration:none" value="/{!contactskill.contact__r.ID}">{!contactskill.contact__r.name}</apex:outputLink>
</apex:column>
    <apex:column headerValue="Organization" rendered="{!IF(skill == contactskill.mkskill__r.name, true, false)}"> 
<apex:outputLink style="text-decoration:none" value="/{!contactskill.contact__r.ID}">{!contactskill.contact__r.email}</apex:outputLink>
</apex:column>
<apex:column headerValue="Organization" rendered="{!IF(skill == contactskill.mkskill__r.name, true, false)}"> 
<apex:outputLink style="text-decoration:none" value="/{!contactskill.contact__r.ID}">{!contactskill.contact__r.account.name}</apex:outputLink>
</apex:column>
    </apex:pageBlockTable>
                 </apex:outputPanel>
            </apex:facet>
            </apex:actionStatus>
</apex:pageBlockSection>
    </apex:pageBlock>
  </apex:repeat>
    </form>
</apex:page>

 

<apex:page showHeader="false" standardStylesheets="true" standardController="account" extensions="DisplayContactExpertise" sidebar="false" docType="html-5.0" applyBodyTag="False" applyHtmlTag="False">
    <style type="text/css">
            body {
        background-color: white;
    }
            .pbTitle {
            white-space:nowrap;
            border:white;
        }
        </style>
        <apex:form ID="TheForm">
               <apex:actionStatus id="mystatus" startText="Loading.....">
                <apex:facet name="stop">
                    <apex:outputPanel id="out">
                
        
        <apex:repeat value="{!skills}" var="skill">
  <apex:pageBlock >
   <apex:pageBlockSection columns="1" >
   <apex:pageBlockTable align="center" border="3" value="{!contactskills}" var="contactskill" columnsWidth="200px">
  <apex:column headerValue="Organization" rendered="{!IF(skill == contactskill.mkskill__r.name, true, false)}">
          <apex:outputText value="name={!contactskill.mkskill__r.name}"></apex:outputText>
         <!-- apex:outputLink style="text-decoration:none">DifferentContactNames</apex:outputLink -->
       </apex:column>
    </apex:pageBlockTable>
  </apex:pageBlockSection>
</apex:pageBlock>
  
      </apex:repeat>
                    
                    </apex:outputPanel>
                   </apex:facet>
                               </apex:actionStatus>
    
             <!-- Define the JavaScript function sayHello-->
             <apex:actionFunction name="sayHello" action="{!load}" reRender="TheForm"  status="mystatus"/>
        </apex:form>
        <!--
            Call the sayHello JavaScript function using a script element
        -->
        <script>
            sayHello();
        </script>
    </apex:page>