Fix flash of unstyled content in action view page (#24712)

# Before

![rec](https://github.com/go-gitea/gitea/assets/20454870/32f8e521-f743-4101-bd3c-923fd5abd893)

# After

![rec](https://github.com/go-gitea/gitea/assets/20454870/070721d1-6749-43c1-ac18-d8c58e5f0901)

Ref: https://github.com/go-gitea/gitea/issues/24625

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>

diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index 88529318919631ebd856df7e7a09bd807655eed6..0786cb60a9a485d64a3c884131a1c2a3ae69197b 100644 (file)
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -2,7 +2,7 @@
     Please also update the template file above if this vue is modified.
 -->
 <template>
-  <span :data-tooltip-content="localeStatus">
+  <span :data-tooltip-content="localeStatus" v-if="status">
     <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
     <SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
     <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index d6a38737511c6061439d887be819f2372857c12d..7685627da6963fa01f36cd68a957b590c3e97bfb 100644 (file)
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -19,7 +19,7 @@
       <div class="action-commit-summary">
         {{ run.commit.localeCommit }}
         <a :href="run.commit.link">{{ run.commit.shortSHA }}</a>
-        &nbsp;<span class="ui label">
+        &nbsp;<span class="ui label" v-if="run.commit.shortSHA">
           <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
         </span>
         &nbsp;{{ run.commit.localePushedBy }}