style: 💄 ローディング中のデザインを変更

hatsu38 · Apr 27, 2023 · 39a5e0c · 39a5e0c
1 parent 03c178e
commit 39a5e0c
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/features/home/components/SectionsBlock.tsx b/src/features/home/components/SectionsBlock.tsx
@@ -16,13 +16,19 @@ export const SectionsBlock: FC<PropsType> = ({
   sections,
   className = "",
 }) => {
+  const array = ["🤖", "🦾", "⚒️", "⏳", "🏋️"];
+  const randomIndex = Math.floor(Math.random() * array.length);
+  const randomValue = array[randomIndex];
   return (
     <div
       className={`shadow-lg w-full bg-white px-10 py-8 rounded-lg ${className}`}
     >
       <h3 className="text-center font-bold text-xl">{title}</h3>
       {isLoading ? (
-        <DotLoadingAnimation />
+        <div className="mt-8 text-center text-sm text-gray-600 space-y-3">
+          <span className="">AIによる要約中です{randomValue}</span>
+          <DotLoadingAnimation className="justify-center" />
+        </div>
       ) : (
         sections.map((item, index) => (
           <section className="pt-10" key={`${item.sectionId}-${index}`}>