RecommendedContent: Move WaitUntilOnPage to within the component instead.

This allows `RecommendedContent` to render the Card but with an empty list, so that the area isn't totally blank while waiting for `WaitUntilOnPage` to debounce.

ui/component/recommendedContent/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import ClaimList from 'component/claimList';
 import Ads from 'web/component/ads';
 import Card from 'component/common/card';
+import WaitUntilOnPage from 'component/common/wait-until-on-page';
 
 type Options = {
   related_to: string,
@@ -68,14 +69,16 @@ export default class RecommendedContent extends React.PureComponent<Props> {
         isBodyList
         title={__('Related')}
         body={
-          <ClaimList
+          <WaitUntilOnPage>
-            isCardBody
+            <ClaimList
-            type="small"
+              isCardBody
-            loading={isSearching}
+              type="small"
-            uris={recommendedContent}
+              loading={isSearching}
-            injectedItem={!isAuthenticated && IS_WEB && <Ads type="video" small />}
+              uris={recommendedContent}
-            empty={__('No related content found')}
+              injectedItem={!isAuthenticated && IS_WEB && <Ads type="video" small />}
-          />
+              empty={__('No related content found')}
+            />
+          </WaitUntilOnPage>
         }
       />
     );

ui/page/file/view.jsx

@@ -165,9 +165,7 @@ class FilePage extends React.Component<Props> {
               }
             />
           </div>
-          <WaitUntilOnPage>
+          <RecommendedContent uri={uri} />
-            <RecommendedContent uri={uri} />
-          </WaitUntilOnPage>
         </div>
       </Page>
     );