add loading animation

Signed-off-by: James <james@jan.ai>

web/app/_components/ExploreModelList/index.tsx

@@ -2,9 +2,10 @@ import React, { useEffect } from "react";
 import ExploreModelItem from "../ExploreModelItem";
 import { getConfiguredModels } from "@/_hooks/useGetDownloadedModels";
 import useGetConfiguredModels from "@/_hooks/useGetConfiguredModels";
+import { Waveform } from "@uiball/loaders";
 
 const ExploreModelList: React.FC = () => {
-  const { models } = useGetConfiguredModels();
+  const { loading, models } = useGetConfiguredModels();
 
   useEffect(() => {
     getConfiguredModels();
@@ -12,6 +13,11 @@ const ExploreModelList: React.FC = () => {
 
   return (
     <div className="flex flex-col flex-1 overflow-y-auto scroll">
+      {loading && (
+        <div className="mx-auto">
+          <Waveform size={24} color="#CBD5E0" />
+        </div>
+      )}
       {models.map((item) => (
         <ExploreModelItem key={item.id} model={item} />
       ))}

web/app/_hooks/useGetConfiguredModels.ts

@@ -3,11 +3,13 @@ import { useEffect, useState } from "react";
 import { getConfiguredModels } from "./useGetDownloadedModels";
 
 export default function useGetConfiguredModels() {
+  const [loading, setLoading] = useState<boolean>(false);
   const [models, setModels] = useState<Product[]>([]);
 
   const fetchModels = async () => {
+    setLoading(true);
     const models = await getConfiguredModels();
-
+    setLoading(false);
     setModels(models);
   };
 
@@ -16,5 +18,5 @@ export default function useGetConfiguredModels() {
     fetchModels();
   }, []);
 
-  return { models };
+  return { loading, models };
 }