@allurereport/web-awesome 3.0.0-beta.10 → 3.0.0-beta.12

package/src/components/TestResult/{TestResultSteps/testResultStep.tsx → TrSteps/TrStep.tsx}

@@ -1,16 +1,17 @@
-import type { DefaultTestStepResult } from "@allurereport/core-api";
+import type { DefaultTestStepResult, TestStepResult } from "@allurereport/core-api";
 import { Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { ArrowButton } from "@/components/ArrowButton";
 import { MetadataList } from "@/components/Metadata";
 import { type MetadataItem } from "@/components/ReportMetadata";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStepInfo } from "@/components/TestResult/TestResultSteps/testResultStepInfo";
+import { TrError } from "@/components/TestResult/TrError";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrStepInfo } from "@/components/TestResult/TrSteps/TrStepInfo";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
-export const TestResultStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
+export const TrStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
   const { parameters } = props;
 
   return (
@@ -19,21 +20,22 @@ export const TestResultStepParameters = (props: { parameters: DefaultTestStepRes
     </div>
   );
 };
-export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) => {
+export const TrStepsContent = (props: { item: DefaultTestStepResult }) => {
   const { item } = props;
 
   return (
     <div className={styles["test-result-step-content"]}>
-      {Boolean(item?.parameters?.length) && <TestResultStepParameters parameters={item.parameters} />}
+      {Boolean(item?.parameters?.length) && <TrStepParameters parameters={item.parameters} />}
+      {Boolean(item?.message && item?.trace) && <TrError {...item} />}
       {Boolean(item?.steps?.length) && (
         <>
           {item.steps?.map((subItem, key) => {
             if (subItem.type === "step") {
-              return <TestResultStep stepIndex={key + 1} key={key} item={subItem} />;
+              return <TrStep stepIndex={key + 1} key={key} item={subItem} />;
             }
 
             if (subItem.type === "attachment") {
-              return <TestResultAttachment stepIndex={key + 1} key={key} item={subItem} />;
+              return <TrAttachment stepIndex={key + 1} key={key} item={subItem} />;
             }
 
             return null;
@@ -44,14 +46,23 @@ export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) =
   );
 };
 
-export const TestResultStep: FunctionComponent<{
+const hasFailedStep = (step: TestStepResult): boolean => {
+  if (step.type !== "step") {
+    return false;
+  }
+
+  return step.status !== "passed" || step.steps.some(hasFailedStep);
+};
+
+export const TrStep: FunctionComponent<{
   item: DefaultTestStepResult;
   stepIndex?: number;
   className?: string;
 }> = ({ item, stepIndex }) => {
-  const isEarlyOpened = collapsedTrees.value.has(item.stepId);
+  const haveFailedSteps = hasFailedStep(item);
+  const isEarlyOpened = collapsedTrees.value.has(item.stepId) ? false : Boolean(haveFailedSteps);
   const [isOpened, setIsOpen] = useState(isEarlyOpened || false);
-  const hasContent = Boolean(item?.steps?.length || item?.parameters?.length);
+  const hasContent = Boolean(item?.steps?.length || item?.parameters?.length || item?.message || item?.trace);
 
   const handleClick = () => {
     setIsOpen(!isOpened);
@@ -76,9 +87,9 @@ export const TestResultStep: FunctionComponent<{
           {stepIndex}
         </Code>
         <Text className={styles["test-result-header-text"]}>{item.name}</Text>
-        <TestResultStepInfo item={item} />
+        <TrStepInfo item={item} />
       </div>
-      {hasContent && isOpened && <TestResultStepsContent item={item} />}
+      {hasContent && isOpened && <TrStepsContent item={item} />}
     </div>
   );
 };

package/src/components/TestResult/{TestResultSteps/testResultStepInfo.tsx → TrSteps/TrStepInfo.tsx}

@@ -1,8 +1,8 @@
 import { type DefaultTestStepResult, formatDuration } from "@allurereport/core-api";
 import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
-export const TestResultStepInfo = (props: { item: DefaultTestStepResult }) => {
+export const TrStepInfo = (props: { item: DefaultTestStepResult }) => {
   const { item } = props;
   const formattedDuration = formatDuration(item?.duration as number);
   const stepLength = item.steps?.length;

package/src/components/TestResult/{TestResultSteps → TrSteps}/index.tsx

@@ -2,19 +2,19 @@ import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult, AwesomeTestStepResult } from "types";
-import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
+import { TrDropdown } from "@/components/TestResult/TrDropdown";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 const typeMap = {
-  step: TestResultStep,
-  attachment: TestResultAttachment,
+  step: TrStep,
+  attachment: TrAttachment,
 } as const;
 
-export type TestResultStepsProps = {
+export type TrStepsProps = {
   steps: AwesomeTestResult["steps"];
   id?: string;
 };
@@ -24,7 +24,7 @@ type StepComponentProps = FunctionalComponent<{
   stepIndex?: number;
 }>;
 
-export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ steps, id }) => {
+export const TrSteps: FunctionalComponent<TrStepsProps> = ({ steps, id }) => {
   const stepsId = `${id}-steps`;
   const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(stepsId));
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
@@ -37,7 +37,7 @@ export const TestResultSteps: FunctionalComponent<TestResultStepsProps> = ({ ste
   const { t } = useI18n("execution");
   return (
     <div className={styles["test-result-steps"]}>
-      <TestResultDropdown
+      <TrDropdown
         icon={allureIcons.lineHelpersPlayCircle}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/{TestResultSteps → TrSteps}/styles.scss

@@ -56,6 +56,7 @@
 .test-result-header-text {
   padding-left: 4px;
   word-break: break-word;
+  margin-right: auto;
 }
 
 .test-result-step-button {
@@ -82,7 +83,6 @@
 }
 
 .item-info {
-  margin-left: auto;
   display: flex;
   gap: 8px;
   color: var(--on-text-secondary);
@@ -151,6 +151,7 @@
 .test-result-attachment-text {
   padding-left: 4px;
   word-break: break-word;
+  margin-right: auto;
 }
 
 .test-result-attachment-image {

package/src/components/TestResult/{TestResultSteps → TrSteps}/wrongAttachment.tsx

@@ -1,4 +1,4 @@
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
 
 export const EmptyComponent = () => {

package/src/components/TestResult/{TestResultTabs → TrTabs}/index.tsx

@@ -4,18 +4,18 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import { activeTab, navigateTo, route } from "@/stores/router";
 import * as styles from "./styles.scss";
 
-type TestResultTabsContextT = {
+type TrTabsContextT = {
   currentTab: string | undefined;
   setCurrentTab: (id: string) => void;
 };
 
-const TestResultTabsContext = createContext<TestResultTabsContextT | null>(null);
+const TestResultTabsContext = createContext<TrTabsContextT | null>(null);
 
 export const useTestResultTabsContext = () => {
   const context = useContext(TestResultTabsContext);
 
   if (!context) {
-    throw new Error("TestResultTabs components must be used within a TestResultTabs component");
+    throw new Error("TestResultTabs components must be used within a TrTabs component");
   }
 
   return context;
@@ -30,15 +30,15 @@ export const TestResultTabsProvider = (props: { initialTab?: string; children: C
   );
 };
 
-export const TestResultTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+export const TrTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
   return <TestResultTabsProvider {...props} />;
 };
 
-export const TestResultTabsList = (props: { children: ComponentChildren }) => {
+export const TrTabsList = (props: { children: ComponentChildren }) => {
   return <div className={styles.tabsList}>{props.children}</div>;
 };
 
-export const TestResultTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
+export const TrTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
   const { currentTab, setCurrentTab } = useTestResultTabsContext();
   const { id, children } = props;
   const isActiveFromUrl = activeTab.value === id;

package/src/components/TestResult/{TestResultTeardown → TrTeardown}/index.tsx

@@ -2,26 +2,26 @@ import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
-import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
+import { TrDropdown } from "@/components/TestResult/TrDropdown";
+import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
 const typeMap = {
-  before: TestResultStep,
-  after: TestResultStep,
-  step: TestResultStep,
-  attachment: TestResultAttachment,
+  before: TrStep,
+  after: TrStep,
+  step: TrStep,
+  attachment: TrAttachment,
 };
 
-export type TestResultTeardownProps = {
+export type TrTeardownProps = {
   teardown: AwesomeTestResult["teardown"];
   id: string;
 };
 
-export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> = ({ teardown, id }) => {
+export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id }) => {
   const teardownId = `${id}-teardown`;
   const isEarlyCollapsed = !collapsedTrees.value.has(teardownId);
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
@@ -35,7 +35,7 @@ export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> =
 
   return (
     <div className={styles["test-result-steps"]}>
-      <TestResultDropdown
+      <TrDropdown
         icon={allureIcons.lineHelpersFlag}
         isOpened={isOpened}
         setIsOpen={handleClick}

package/src/components/TestResult/index.tsx

@@ -1,59 +1,71 @@
 import clsx from "clsx";
 import type { FunctionComponent, FunctionalComponent } from "preact";
+import { useEffect } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
-import { TestResultAttachmentView } from "@/components/TestResult/TestResultAttachmentsView";
-import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
-import { TestResultHeader } from "@/components/TestResult/TestResultHeader";
-import TestResultHistoryView from "@/components/TestResult/TestResultHistory";
-import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
-import { TestResultOverview } from "@/components/TestResult/TestResultOverview";
-import { TestResultRetriesView } from "@/components/TestResult/TestResultRetriesView";
-import { TestResultTabs, useTestResultTabsContext } from "@/components/TestResult/TestResultTabs";
+import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
+import TrEmpty from "@/components/TestResult/TrEmpty";
+import { TrEnvironmentsView } from "@/components/TestResult/TrEnvironmentsView";
+import { TrHeader } from "@/components/TestResult/TrHeader";
+import TrHistoryView from "@/components/TestResult/TrHistory";
+import { TrInfo } from "@/components/TestResult/TrInfo";
+import { TrOverview } from "@/components/TestResult/TrOverview";
+import { TrRetriesView } from "@/components/TestResult/TrRetriesView";
+import { TrTabs, useTestResultTabsContext } from "@/components/TestResult/TrTabs";
+import { fetchTestEnvGroup } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
 import * as styles from "./styles.scss";
 
-export type TestResultViewProps = {
+export type TrViewProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TestResultView: FunctionalComponent<TestResultViewProps> = ({ testResult }) => {
+export type TrContentProps = {
+  testResult?: AwesomeTestResult;
+};
+
+export type TrProps = {
+  testResult?: AwesomeTestResult;
+};
+
+const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
   const { currentTab } = useTestResultTabsContext();
   const viewMap: Record<string, any> = {
-    overview: TestResultOverview,
-    history: TestResultHistoryView,
-    attachments: TestResultAttachmentView,
-    retries: TestResultRetriesView,
+    overview: TrOverview,
+    history: TrHistoryView,
+    attachments: TrAttachmentView,
+    retries: TrRetriesView,
+    environments: TrEnvironmentsView,
   };
   const ViewComponent = viewMap[currentTab];
 
   return <ViewComponent testResult={testResult} />;
 };
 
-export type TestResultContentProps = {
-  testResult?: AwesomeTestResult;
-};
-
-const TestResultContent: FunctionalComponent<TestResultContentProps> = ({ testResult }) => {
+const TrContent: FunctionalComponent<TrContentProps> = ({ testResult }) => {
   return (
-    <TestResultTabs initialTab="overview">
-      <TestResultInfo testResult={testResult} />
-      <TestResultView testResult={testResult} />
-    </TestResultTabs>
+    <TrTabs initialTab="overview">
+      <TrInfo testResult={testResult} />
+      <TrView testResult={testResult} />
+    </TrTabs>
   );
 };
 
-export type TestResultProps = {
-  testResult?: AwesomeTestResult;
-};
-
-const TestResult: FunctionComponent<TestResultProps> = ({ testResult }) => {
+const TestResult: FunctionComponent<TrProps> = ({ testResult }) => {
   const splitModeClass = isSplitMode.value ? styles["scroll-inside"] : "";
 
+  useEffect(() => {
+    const testCaseId = testResult?.testCase?.id;
+
+    if (testCaseId) {
+      fetchTestEnvGroup(testCaseId);
+    }
+  }, [testResult]);
+
   return (
     <>
-      {!isSplitMode.value && <TestResultHeader testResult={testResult} />}
+      {!isSplitMode.value && <TrHeader testResult={testResult} />}
       <div className={clsx(styles.content, splitModeClass)}>
-        {testResult ? <TestResultContent testResult={testResult} /> : <TestResultEmpty />}
+        {testResult ? <TrContent testResult={testResult} /> : <TrEmpty />}
       </div>
     </>
   );

package/src/components/TestResult/styles.scss

@@ -7,5 +7,6 @@
 
 .scroll-inside {
   overflow: auto;
-  height: calc(100vh - var(--footer-header-sizes));
+  height: 100%;
+  border-radius: 0;
 }

package/src/components/Tree/index.tsx

@@ -1,9 +1,11 @@
-import { Button, Loadable, PageLoader, Text, Tree } from "@allurereport/web-components";
+import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allurereport/web-components";
 import type { AwesomeStatus } from "types";
+import { MetadataButton } from "@/components/MetadataButton";
 import { useTabsContext } from "@/components/Tabs";
-import { statsStore } from "@/stores";
+import { reportStatsStore, statsByEnvStore } from "@/stores";
+import { collapsedEnvironments, currentEnvironment, environmentsStore } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { navigateTo } from "@/stores/router";
+import { navigateTo, route } from "@/stores/router";
 import {
   clearTreeFilters,
   collapsedTrees,
@@ -11,20 +13,22 @@ import {
   noTests,
   noTestsFound,
   toggleTree,
-  treeFiltersStore,
   treeStore,
 } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
 export const TreeList = () => {
   const { t } = useI18n("empty");
+  const { t: tEnvironments } = useI18n("environments");
   const { currentTab } = useTabsContext();
+  const { id: routeId } = route.value;
 
   return (
     <Loadable
       source={treeStore}
       renderLoader={() => <PageLoader />}
       renderData={() => {
+        // TODO: use function instead of computed
         if (noTests.value) {
           return (
             <div className={styles["tree-list"]}>
@@ -55,19 +59,98 @@ export const TreeList = () => {
           );
         }
 
+        // render single tree for single environment
+        if (environmentsStore.value.data.length === 1) {
+          return (
+            <div className={styles["tree-list"]}>
+              <Tree
+                reportStatistic={reportStatsStore.value.data}
+                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                collapsedTrees={collapsedTrees.value}
+                toggleTree={toggleTree}
+                navigateTo={navigateTo}
+                tree={filteredTree.value.default}
+                statusFilter={currentTab as AwesomeStatus}
+                routeId={routeId}
+                root
+              />
+            </div>
+          );
+        }
+
+        const currentTree = currentEnvironment.value ? filteredTree.value[currentEnvironment.value] : undefined;
+
+        if (currentTree) {
+          return (
+            <div className={styles["tree-list"]}>
+              <Tree
+                reportStatistic={reportStatsStore.value.data}
+                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                collapsedTrees={collapsedTrees.value}
+                toggleTree={toggleTree}
+                navigateTo={navigateTo}
+                tree={currentTree}
+                statusFilter={currentTab as AwesomeStatus}
+                routeId={routeId}
+                root
+              />
+            </div>
+          );
+        }
+
+        // render tree section for every environment
         return (
-          <div className={styles["tree-list"]}>
-            <Tree
-              collapsedTrees={collapsedTrees.value}
-              toggleTree={toggleTree}
-              treeFiltersStore={treeFiltersStore}
-              navigateTo={navigateTo}
-              statsStore={statsStore}
-              tree={filteredTree.value}
-              statusFilter={currentTab as AwesomeStatus}
-              root
-            />
-          </div>
+          <>
+            {Object.entries(filteredTree.value).map(([key, value]) => {
+              const { total } = value.statistic;
+
+              if (total === 0) {
+                return null;
+              }
+
+              const isOpened = !collapsedEnvironments.value.includes(key);
+              const toggleEnv = () => {
+                collapsedEnvironments.value = isOpened
+                  ? collapsedEnvironments.value.concat(key)
+                  : collapsedEnvironments.value.filter((env) => env !== key);
+              };
+              const stats = statsByEnvStore.value.data[key];
+
+              return (
+                <div key={key} className={styles["tree-section"]} data-testid={"tree-section"}>
+                  <div className={styles["tree-env-button"]}>
+                    <MetadataButton
+                      isOpened={isOpened}
+                      setIsOpen={toggleEnv}
+                      title={`${tEnvironments("environment", { count: 1 })}: "${key}"`}
+                      counter={total}
+                      data-testid={"tree-section-env-button"}
+                    />
+                    <TreeStatusBar
+                      statistic={stats}
+                      reportStatistic={reportStatsStore.value.data}
+                      statusFilter={currentTab}
+                    />
+                  </div>
+                  {isOpened && (
+                    <div className={styles["tree-list"]} data-testid={"tree-section-env-content"}>
+                      <Tree
+                        statistic={statsByEnvStore.value.data[key]}
+                        reportStatistic={reportStatsStore.value.data}
+                        collapsedTrees={collapsedTrees.value}
+                        toggleTree={toggleTree}
+                        statusFilter={currentTab}
+                        navigateTo={navigateTo}
+                        tree={value}
+                        routeId={routeId}
+                        root
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </>
         );
       }}
     />

package/src/components/Tree/styles.scss

@@ -7,7 +7,7 @@
 }
 
 .tree-list {
-  min-height: 128px;
+  min-height: 320px;
 }
 
 .tree-header {
@@ -187,3 +187,18 @@
 .tree-item-marked {
   background: var(--bg-base-secondary);
 }
+
+.tree-section {
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-env-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 0 6px;
+}

package/src/index.tsx

@@ -3,18 +3,19 @@ import { Spinner, SvgIcon, allureIcons } from "@allurereport/web-components";
 import "@allurereport/web-components/index.css";
 import clsx from "clsx";
 import { render } from "preact";
-import { useEffect } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import "@/assets/scss/index.scss";
 import { BaseLayout } from "@/components/BaseLayout";
 import { ModalComponent } from "@/components/Modal";
 import { SplitLayout } from "@/components/SplitLayout";
-import { fetchStats, getLocale, getTheme, waitForI18next } from "@/stores";
+import { fetchEnvStats, fetchReportStats, getLocale, getTheme, waitForI18next } from "@/stores";
 import { fetchPieChartData } from "@/stores/chart";
+import { currentEnvironment, environmentsStore, fetchEnvironments } from "@/stores/env";
 import { fetchEnvInfo } from "@/stores/envInfo";
 import { getLayout, isLayoutLoading, isSplitMode } from "@/stores/layout";
 import { handleHashChange, route } from "@/stores/router";
 import { fetchTestResult, fetchTestResultNav } from "@/stores/testResults";
-import { fetchTreeData } from "@/stores/tree";
+import { fetchEnvTreesData } from "@/stores/tree";
 import { isMac } from "@/utils/isMac";
 import * as styles from "./styles.scss";
 
@@ -26,28 +27,40 @@ const Loader = () => {
     </div>
   );
 };
+
 const App = () => {
+  const [prefetched, setPrefetched] = useState(false);
   const { id: testResultId } = route.value;
+  const prefetchData = async () => {
+    const fns = [ensureReportDataReady, fetchReportStats, fetchPieChartData, fetchEnvironments, fetchEnvInfo];
 
-  useEffect(() => {
     if (globalThis) {
-      getLocale();
-      getLayout();
-      getTheme();
+      fns.unshift(getLocale, getLayout as () => Promise<void>, getTheme as () => Promise<void>);
+    }
+
+    await waitForI18next;
+    await Promise.all(fns.map((fn) => fn(currentEnvironment.value)));
+
+    if (currentEnvironment.value) {
+      await fetchEnvTreesData([currentEnvironment.value]);
+    } else {
+      await fetchEnvTreesData(environmentsStore.value.data);
+      await fetchEnvStats(environmentsStore.value.data);
     }
-    ensureReportDataReady();
-    fetchStats();
-    fetchEnvInfo();
-    fetchPieChartData();
-    fetchTreeData();
-  }, []);
+
+    setPrefetched(true);
+  };
+
+  useEffect(() => {
+    prefetchData();
+  }, [currentEnvironment.value]);
 
   useEffect(() => {
     if (testResultId) {
       fetchTestResult(testResultId);
-      fetchTestResultNav();
+      fetchTestResultNav(currentEnvironment.value);
     }
-  }, [testResultId]);
+  }, [testResultId, currentEnvironment]);
 
   useEffect(() => {
     handleHashChange();
@@ -60,9 +73,13 @@ const App = () => {
 
   return (
     <div className={styles.main}>
-      <Loader />
-      {isSplitMode.value ? <SplitLayout /> : <BaseLayout />}
-      <ModalComponent />
+      {!prefetched && <Loader />}
+      {prefetched && (
+        <>
+          {isSplitMode.value ? <SplitLayout /> : <BaseLayout />}
+          <ModalComponent />
+        </>
+      )}
     </div>
   );
 };
@@ -79,18 +96,4 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 });
 
-(async () => {
-  await waitForI18next;
-  if (globalThis) {
-    await getLocale();
-    getLayout();
-    getTheme();
-  }
-  await ensureReportDataReady();
-  await fetchStats();
-  await fetchEnvInfo();
-  await fetchPieChartData();
-  await fetchTreeData();
-
-  render(<App />, rootElement);
-})();
+render(<App />, rootElement);