feat: add loading state to TreeDetails component

- Added `common` object to `TreeDetailsLazyLoaded` type with `isAllReady`
  and `isAnyLoading` properties.
- Updated `useTreeDetailsLazyLoadQuery` hook to compute `isAllReady` and
  `isAnyLoading` values.
- Imported `LoaderCircle` and `LoadingCircle` components in
  `TreeDetails.tsx`.
- Display `TreeDetailsFilter` only when data is ready and not loading.
- Show `LoadingCircle` when data is not ready and loading.

dashboard/src/hooks/useTreeDetailsLazyLoadQuery.ts

@@ -50,6 +50,10 @@ export type TreeDetailsLazyLoaded = {
     isLoading: boolean;
     status: QuerySelectorStatus;
   };
+  common: {
+    isAllReady: boolean;
+    isAnyLoading: boolean;
+  };
 };
 
 export const useTreeDetailsLazyLoadQuery = (
@@ -87,6 +91,18 @@ export const useTreeDetailsLazyLoadQuery = (
       (!!summaryResult.data && currentPageTab === 'global.tests') || fetchAll,
   });
 
+  const isAllReady =
+    !!summaryResult.data &&
+    !!buildsResult.data &&
+    !!bootsResult.data &&
+    !!testsResult.data;
+
+  const isAnyLoading =
+    summaryResult.isLoading ||
+    buildsResult.isLoading ||
+    bootsResult.isLoading ||
+    testsResult.isLoading;
+
   useEffect(() => {
     if (
       canWeFetchAll(!!summaryResult.data, currentPageTab, {
@@ -134,5 +150,9 @@ export const useTreeDetailsLazyLoadQuery = (
       isLoading: testsResult.isLoading,
       status: testsResult.status,
     },
+    common: {
+      isAllReady,
+      isAnyLoading,
+    },
   };
 };

dashboard/src/pages/TreeDetails/TreeDetails.tsx

@@ -46,6 +46,8 @@ import { CommitTagTooltip } from '@/components/Tooltip/CommitTagTooltip';
 
 import { useTreeDetailsLazyLoadQuery } from '@/hooks/useTreeDetailsLazyLoadQuery';
 
+import { LoadingCircle } from '@/components/ui/loading-circle';
+
 import TreeDetailsFilter from './TreeDetailsFilter';
 import type { TreeDetailsTabRightElement } from './Tabs/TreeDetailsTab';
 import TreeDetailsTab from './Tabs/TreeDetailsTab';
@@ -130,6 +132,7 @@ function TreeDetails(): JSX.Element {
     filter: reqFilter,
   });
 
+  const { isAllReady, isAnyLoading } = treeDetailsLazyLoaded.common;
   const {
     data,
     isLoading,
@@ -270,16 +273,19 @@ function TreeDetails(): JSX.Element {
           />
         </div>
         <div className="flex flex-col pb-2">
-          {data?.summary.tree_url && (
-            <div className="sticky top-[4.5rem] z-10">
-              <div className="absolute right-0 top-2 py-4">
+          <div className="sticky top-[4.5rem] z-10">
+            <div className="absolute right-0 top-2 py-4">
+              {data && isAllReady && !isAnyLoading && (
                 <TreeDetailsFilter
                   paramFilter={diffFilter}
                   treeUrl={data.summary.tree_url}
                 />
-              </div>
+              )}
+              {!isAllReady && isAnyLoading && (
+                <LoadingCircle className="mr-8 mt-6" />
+              )}
             </div>
-          )}
+          </div>
           <TreeDetailsTab
             treeDetailsLazyLoaded={treeDetailsLazyLoaded}
             filterListElement={filterListElement}