Use v-else instead of duplicating logic

app/assets/javascripts/repo/components/repo_preview.vue

@@ -30,9 +30,23 @@ export default {
 
 <template>
 <div>
-  <div v-if="!activeFile.render_error" v-html="activeFile.html"></div>
-  <div v-if="activeFile.render_error" class="vertical-center render-error">
-    <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+  <div
+    v-if="!activeFile.render_error"
+    v-html="activeFile.html">
+  </div>
+  <div
+    v-else-if="activeFile.tooLarge"
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.
+    </p>
+  </div>
+  <div
+    v-else
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed because a rendering error occured. You can <a :href="activeFile.raw_path">download</a> it instead.
+    </p>
   </div>
 </div>
 </template>

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -190,7 +190,7 @@ const RepoHelper = {
 
     newFile.url = file.url || location.pathname;
     newFile.url = file.url;
-    if (newFile.render_error === 'too_large') {
+    if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') {
       newFile.tooLarge = true;
     }
     newFile.newContent = '';