feat(app): update timeline skeleton

Author: cfu288

apps/web/src/components/hooks/SkeletonSearchBar.tsx renamed to apps/web/src/components/timeline/SkeletonSearchBar.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 export function SkeletonSearchBar() {
   return (
-    <div className="mb-1 mt-4 w-full sm:mt-6">
-      <div className="relative flex items-center">
-        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 ">
+    <div className="mb-1 mt-4 w-full sm:mt-6 flex flex-row">
+      <div className="relative flex items-center flex-1">
+        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
           <svg
             aria-hidden="true"
             className="h-5 w-5 text-gray-800 dark:text-gray-700"
@@ -21,14 +21,16 @@ export function SkeletonSearchBar() {
             ></path>
           </svg>
         </div>
-        <input
-          tabIndex={1}
-          type="text"
-          name="search"
-          id="search"
-          placeholder="Search your medical records"
-          className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-md border-gray-300 pl-10 pr-12 shadow-md sm:text-sm"
-        />
+        <div className="w-full">
+          <input
+            tabIndex={1}
+            type="text"
+            name="search"
+            id="search"
+            placeholder="Search your medical records"
+            className="focus:border-primary-500 focus:ring-primary-500 transition-colors block w-full rounded-md border-gray-300 pl-10 pr-10 shadow-sm sm:text-sm"
+          />
+        </div>
       </div>
     </div>
   );

apps/web/src/components/timeline/TimelineSkeleton.tsx

@@ -1,15 +1,15 @@
 import React, { Fragment, memo } from 'react';
 import { SkeletonTimelineCard } from './SkeletonTimelineCard';
 import { SkeletonTimelineYearHeader } from './SkeletonTimelineYearHeader';
-import { SkeletonSearchBar } from '../hooks/SkeletonSearchBar';
+import { SkeletonSearchBar } from './SkeletonSearchBar';
 import { JumpToPanel } from './JumpToPanel';
 import { SkeletonTimelineMonthDayHeader } from './TimelineMonthDayHeader';
 
 function TimelineSkeletonUnmemoed() {
   return (
     <div className={`relative flex`}>
       <JumpToPanel isLoading={true} />
-      <div className="relative mx-auto flex w-full max-w-4xl flex-col overflow-x-clip px-4 pb-12 sm:px-6 lg:px-8">
+      <div className="h-max w-full max-w-4xl flex-col px-4 pb-20 sm:px-6 sm:pb-6 lg:px-8">
         <SkeletonSearchBar />
         {[...Array(2)].map((_, index) => (
           <div key={index} className="relative">

apps/web/tsconfig.app.json

@@ -31,7 +31,7 @@
     "./src/components/connection/ButtonLoadingSpinner.tsx",
     "./src/components/timeline/SkeletonLoadingText.tsx",
     "src/components/timeline/TimelineSkeleton.tsx",
-    "src/components/hooks/SkeletonSearchBar.tsx",
+    "src/components/timeline/SkeletonSearchBar.tsx",
     "src/components/timeline/SearchBar.tsx",
     "src/components/timeline/SkeletonTimelineYearHeader.tsx",
     "./src/pages/SkeletonJumpToPanel.tsx",