feat: [M3-7666] - Remove Animation from Search Results and Animate Ic…

…on Instead (linode#10754) * Remove animation from search results and animate icon instead * Fix SearchLanding Search render test * Added changeset: Remove animation from Search Results and Animate Icon instead. * Clean up.. * Fix no search results test in smoke-delete-linode.spec.ts
pmakode-akamai · Aug 9, 2024 · ca1cb41 · ca1cb41
1 parent a85ebfb
commit ca1cb41
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 46 deletions.
diff --git a/packages/manager/.changeset/pr-10754-added-1723039007976.md b/packages/manager/.changeset/pr-10754-added-1723039007976.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Remove animation from Search Results and Animate Icon instead. ([#10754](https://github.com/linode/manager/pull/10754))
diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
@@ -20,7 +20,7 @@ const confirmDeletion = (linodeLabel: string) => {
     .click()
     .type(`${linodeLabel}{enter}`);
   cy.findByText('You searched for ...').should('be.visible');
-  cy.findByText('Sorry, no results for this one').should('be.visible');
+  cy.findByText('Sorry, no results for this one.').should('be.visible');
 };
 
 const deleteLinodeFromActionMenu = (linodeLabel: string) => {

diff --git a/packages/manager/src/features/Search/SearchLanding.styles.ts b/packages/manager/src/features/Search/SearchLanding.styles.ts
@@ -1,6 +1,7 @@
+import { keyframes } from '@emotion/react';
 import { Stack } from '@mui/material';
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 
 import Error from 'src/assets/icons/error.svg';
 import { H1Header } from 'src/components/H1Header/H1Header';
@@ -25,9 +26,47 @@ export const StyledGrid = styled(Grid, {
   padding: `${theme.spacing(10)} ${theme.spacing(4)}`,
 }));
 
+const blink = keyframes`
+  0%, 50%, 100% {
+    transform: scaleY(0.1);
+  }
+`;
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+   100% {
+   transform: rotate(360deg);
+  }
+`;
+
+const shake = keyframes`
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25%, 75% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+`;
+
 export const StyledError = styled(Error, {
   label: 'StyledError',
 })(({ theme }) => ({
+  '& path:nth-of-type(4)': {
+    animation: `${blink} 1s`,
+    transformBox: 'fill-box',
+    transformOrigin: 'center',
+  },
+  '& path:nth-of-type(5)': {
+    animation: `${rotate} 3s`,
+    transformBox: 'fill-box',
+    transformOrigin: 'center',
+  },
+  animation: `${shake} 0.5s`,
   color: theme.palette.text.primary,
   height: 60,
   marginBottom: theme.spacing(4),

diff --git a/packages/manager/src/features/Search/SearchLanding.test.tsx b/packages/manager/src/features/Search/SearchLanding.test.tsx
@@ -41,7 +41,7 @@ describe('Component', () => {
 
   it('should render', async () => {
     const { findByText } = renderWithTheme(<SearchLanding {...props} />);
-    expect(await findByText(/search/));
+    expect(await findByText(/searched/i));
   });
 
   it('should search on mount', async () => {

diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx
@@ -55,14 +55,6 @@ export interface SearchLandingProps
   extends SearchProps,
     RouteComponentProps<{}> {}
 
-const splitWord = (word: any) => {
-  word = word.split('');
-  for (let i = 0; i < word.length; i += 2) {
-    word[i] = <span key={i}>{word[i]}</span>;
-  }
-  return word;
-};
-
 export const SearchLanding = (props: SearchLandingProps) => {
   const { entities, search, searchResultsByEntity } = props;
   const { data: regions } = useRegionsQuery();
@@ -285,11 +277,9 @@ export const SearchLanding = (props: SearchLandingProps) => {
             <Typography style={{ marginBottom: 16 }}>
               You searched for ...
             </Typography>
-            <Typography className="resultq">
-              {query && splitWord(query)}
-            </Typography>
+            <Typography className="resultq">{query}</Typography>
             <Typography className="nothing" style={{ marginTop: 56 }}>
-              Sorry, no results for this one
+              Sorry, no results for this one.
             </Typography>
           </StyledStack>
         </StyledGrid>

diff --git a/packages/manager/src/features/Search/searchLanding.css b/packages/manager/src/features/Search/searchLanding.css
@@ -1,28 +1,3 @@
-@keyframes falling {
-  0% {
-    transform: rotateX(0deg);
-  }
-  12% {
-    transform: rotateX(240deg);
-  }
-  24% {
-    transform: rotateX(150deg);
-  }
-  36% {
-    transform: rotateX(200deg);
-  }
-  48% {
-    transform: rotateX(175deg);
-  }
-  60%,
-  85% {
-    transform: rotateX(180deg);
-  }
-  100% {
-    transform: rotateX(180deg);
-  }
-}
-
 @keyframes fadein {
   0% {
     opacity: 0;
@@ -37,12 +12,6 @@
   line-height: 0.75;
 }
 
-.resultq span:nth-child(1) {
-  display: inline-block;
-  animation: falling 2s linear 2s 1 normal forwards;
-  transform-origin: bottom center;
-}
-
 .nothing {
   opacity: 0;
   animation: fadein 0.2s linear 2.5s 1 normal forwards;