Recommended: restore ad location

Ticket: 1018
Reference: 2575c5d

- Restored position of the ad to the 4th slot.
- Moved repeated query out of the map predicate (`droppableProvided ?`)
- For draggables, make the injected item always on top for now. There are draggables with injected items at the moment.

ui/component/claimList/view.jsx

@@ -250,17 +250,16 @@ export default function ClaimList(props: Props) {
           {...(droppableProvided && droppableProvided.droppableProps)}
           ref={droppableProvided && droppableProvided.innerRef}
         >
-          {injectedItem && sortedUris.some((uri, index) => index === 4) && <li>{injectedItem}</li>}
-
-          {sortedUris.map((uri, index) =>
-            droppableProvided ? (
+          {droppableProvided ? (
+            <>
+              {injectedItem && <li>{injectedItem}</li>}
+              {sortedUris.map((uri, index) => (
                 <React.Suspense fallback={null} key={uri}>
                   <Draggable draggableId={uri} index={index}>
                     {(draggableProvided, draggableSnapshot) => {
                       // Restrict dragging to vertical axis
                       // https://github.com/atlassian/react-beautiful-dnd/issues/958#issuecomment-980548919
                       let transform = draggableProvided.draggableProps.style.transform;
-
                       if (draggableSnapshot.isDragging && transform) {
                         transform = transform.replace(/\(.+,/, '(0,');
                       }
@@ -274,19 +273,23 @@ export default function ClaimList(props: Props) {
                         <li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}>
                           {/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */}
                           <div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} />
-
                           {getClaimPreview(uri, index, draggableProvided)}
                         </li>
                       );
                     }}
                   </Draggable>
                 </React.Suspense>
+              ))}
+              {droppableProvided.placeholder}
+            </>
           ) : (
-              getClaimPreview(uri, index)
-            )
+            sortedUris.map((uri, index) => (
+              <React.Fragment key={uri}>
+                {injectedItem && index === 4 && <li>{injectedItem}</li>}
+                {getClaimPreview(uri, index)}
+              </React.Fragment>
+            ))
           )}
-
-          {droppableProvided && droppableProvided.placeholder}
         </ul>
       )}