From 3cc7be77d766b9161808898a0d2cc8373aee5a21 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 27 Jul 2021 15:19:30 -0700
Subject: [PATCH] Replace octoface icon with spinner in SelectMenu component
 (#1355)

* Replace octoface with spinner

* Create few-flowers-play.md
---
 .changeset/few-flowers-play.md                |  5 ++++
 src/SelectMenu/SelectMenuLoadingAnimation.tsx | 25 +++----------------
 2 files changed, 9 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/few-flowers-play.md

diff --git a/.changeset/few-flowers-play.md b/.changeset/few-flowers-play.md
new file mode 100644
index 00000000000..2311354b91a
--- /dev/null
+++ b/.changeset/few-flowers-play.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Replace octoface icon with spinner in SelectMenu component
diff --git a/src/SelectMenu/SelectMenuLoadingAnimation.tsx b/src/SelectMenu/SelectMenuLoadingAnimation.tsx
index b57590a97bb..056ed60668d 100644
--- a/src/SelectMenu/SelectMenuLoadingAnimation.tsx
+++ b/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>
   )
 }