fixed #445 by adding a animated search component

web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+
+import styles from './slider.module.css';
+
+const AnimatedInputWrapper = () => {
+  return (
+    <div className={styles.placeholder}>
+      <AnimatedPlaceHolderWrapper />
+    </div>
+  );
+};
+
+const popRepos = ['golang/go', 'mozilla/rust', 'apple/swift', 'oven-sh/bun'];
+const AnimatedPlaceHolderWrapper = () => {
+  return (
+    <div className={styles.animationWrapper}>
+      <span>Search for</span>
+      <AnimatedRepos />
+    </div>
+  );
+};
+
+const AnimatedRepos = () => {
+  const [animationIndex, setAnimationIndex] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (animationIndex < popRepos.length - 1) {
+        setAnimationIndex(animationIndex + 1);
+      } else {
+        setAnimationIndex(0);
+      }
+    }, 2000);
+    return () => clearInterval(interval);
+  });
+  return (
+    <div className={styles.textslide}>
+      <div
+        className={styles.text}
+        style={{ bottom: animationIndex * 1.4 + 'em' }}
+      >
+        {popRepos.map((item) => (
+          <div key={item} className={styles.repo}>
+            <span>{item}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedInputWrapper;

web-server/src/components/AnimatedInputWrapper/slider.module.css

@@ -0,0 +1,29 @@
+.animationWrapper{
+    position: absolute;
+    top: 50%;
+    transform: translate(0%, -50%);
+    font-size: 1em;
+    display: flex;
+    gap: 4px;
+}
+
+.placeholder{
+    height: 1.4em;
+    width: 10rem;
+    position: relative;
+}
+
+.repo{
+    height: 1.4em;
+}
+
+.text{
+    position: relative;
+    transition: all 0.5s ease;
+}
+
+.textslide{
+    display: flex;
+    height: 1.4em;
+    align-items: flex-start;
+}

web-server/src/components/Teams/CreateTeams.tsx

@@ -32,6 +32,7 @@ import { DeploymentWorkflowSelector } from '@/components/WorkflowSelector';
 import { useBoolState, useEasyState } from '@/hooks/useEasyState';
 import { BaseRepo, DeploymentSources } from '@/types/resources';
 
+import AnimatedInputWrapper from '../AnimatedInputWrapper/AnimatedInputWrapper';
 import { FlexBox } from '../FlexBox';
 import { Line } from '../Text';
 
@@ -162,6 +163,7 @@ const TeamRepos: FC = () => {
   } = useTeamCRUD();
 
   const searchQuery = useEasyState('');
+  const searchFocus = useBoolState(false);
 
   return (
     <FlexBox col gap={2}>
@@ -191,15 +193,21 @@ const TeamRepos: FC = () => {
           getOptionLabel={(option) => `${option.parent}/${option.name}`}
           renderInput={(params) => (
             <TextField
+              onFocus={searchFocus.true}
+              onBlur={searchFocus.false}
               onChange={(e) => {
                 handleReposSearch(e as React.ChangeEvent<HTMLInputElement>);
                 searchQuery.set(e.target.value);
               }}
               {...params}
               label={
-                selectedRepos.length
-                  ? `${selectedRepos.length} selected`
-                  : `Search repositories`
+                selectedRepos.length ? (
+                  `${selectedRepos.length} selected`
+                ) : !searchFocus.value ? (
+                  <AnimatedInputWrapper />
+                ) : (
+                  'Search for org/repo'
+                )
               }
               error={teamRepoError}
               InputProps={{