Replace octoface icon with spinner in SelectMenu component (#1355)

* Replace octoface with spinner

* Create few-flowers-play.md

.changeset/few-flowers-play.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Replace octoface icon with spinner in SelectMenu component

src/SelectMenu/SelectMenuLoadingAnimation.tsx

@@ -1,30 +1,13 @@
 import React from 'react'
-import styled, {keyframes} from 'styled-components'
-import StyledOcticon from '../StyledOcticon'
-import {OctofaceIcon} from '@primer/octicons-react'
-import {get, COMMON, SystemCommonProps} from '../constants'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import Spinner from '../Spinner'
 import {ComponentProps} from '../utils/types'
 
-const pulseKeyframes = keyframes`
-  0% {
-    opacity: 0.3;
-  }
-  10% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.3;
-  }
-`
-
 const Animation = styled.div<SystemCommonProps>`
   padding: ${get('space.6')} ${get('space.4')};
   text-align: center;
   background-color: ${get('colors.bg.overlay')};
-  animation-name: ${pulseKeyframes};
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
   ${COMMON}
 `
 
@@ -33,7 +16,7 @@ export type SelectMenuLoadingAnimationProps = ComponentProps<typeof Animation>
 const SelectMenuLoadingAnimation = (props: SelectMenuLoadingAnimationProps) => {
   return (
     <Animation {...props}>
-      <StyledOcticon size={32} icon={OctofaceIcon} />
+      <Spinner />
     </Animation>
   )
 }